1

PHP で自分の Web サイトに xCharts を使用する方法を学んでおり、例に従ってさまざまな種類のグラフを作成する方法を学んでいます。私にとってうまくいかないのは、マウスオーバーとマウスアウトの機能だけです。私はこのサンプルコードを使用しています：

            var tt = document.createElement('div'),
            leftOffset = -(~~$('html').css('padding-left').replace('px', '') + ~~$('body').css('margin-left').replace('px', '')),
              topOffset = -32;
            tt.className = 'ex-tooltip';
            document.body.appendChild(tt);

            var data = {
              "xScale": "time",
              "yScale": "linear",
              "main": [
                {
                  "className": ".pizza",
                  "data": [
                    {
                      "x": "2012-11-05",
                      "y": 6
                    },
                    {
                      "x": "2012-11-06",
                      "y": 6
                    },
                    {
                      "x": "2012-11-07",
                      "y": 8
                    },
                    {
                      "x": "2012-11-08",
                      "y": 3
                    },
                    {
                      "x": "2012-11-09",
                      "y": 4
                    },
                    {
                      "x": "2012-11-10",
                      "y": 9
                    },
                    {
                      "x": "2012-11-11",
                      "y": 6
                    }
                  ]
                }
              ]
            };
            var opts = {
              "dataFormatX": function (x) { return d3.time.format('%Y-%m-%d').parse(x); },
              "tickFormatX": function (x) { return d3.time.format('%A')(x); },
              "mouseover": function (d, i) {
                var pos = $(this).offset();
                $(tt).text(d3.time.format('%A')(d.x) + ': ' + d.y)
                  .show();
              },
              "mouseout": function (x) {
                $(tt).hide();
              }
            };
            var myChart = new xChart('line-dotted', data, '#myChart', opts);

明確にするために、チャートは作成されており、データは正しいです。欠けているのはマウスオーバーだけで、例に従って動作するはずです。これが機能しない理由はありますか？私が見逃しているものはありますか？

4

1 に答える 1

2

.ex-tooltip の css を含める必要があります。例を調べると、次のように表示されます。

.ex-tooltip {
    position: absolute;
    background: #EEE;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    padding: 5px;
    -webkit-box-shadow: 0 1px 3px #000;
    -moz-box-shadow: 0 1px 3px #000;
    -ms-box-shadow: 0 1px 3px #000;
    -o-box-shadow: 0 1px 3px #000;
    box-shadow: 0 1px 3px #000;
    border-collapse: separate;
    display: none;
}
于 2013-11-07T16:00:48.867 に答える