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

Can't get mouseover to work in xCharts

本文关键字:xCharts 工作 悬停 鼠标      更新时间:2023-09-26

我正在学习如何在PHP上使用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);

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

您必须包含 .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;
}