Question

我正在学习如何在我的PHP网站上使用xCharts，并且已经按照这些示例来学习如何使用不同类型的图表。对我来说唯一不起作用的是mouseover和mouseout功能。我一直在使用这个示例代码：

            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);

为了清楚起见，正在创建图表并且数据是正确的，唯一缺少的是鼠标悬停，它应该根据示例工作。任何想法为什么这不起作用？我错过了什么？

Answer 1

如果你检查一下你会看到的例子，你必须包含.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;
}

无法让鼠标悬停在xCharts中工作

1 个答案: