highcharts工具提示没有移动下一个点

时间:2014-11-14 05:03:28

标签: javascript jquery html css highcharts

我尝试了这段代码,但工具提示只显示了起始值和结束值。但我想要的是显示所有值的工具提示。

如何向高图表的所有值显示工具提示? - "从第一个旁边的其他点悬停"

这是我的完整代码:



$(function() {
  $('#container').highcharts({
    chart: {
      zoomType: 'y'
    },
    title: {
      text: 'FlexiMc'
    },
    xAxis: {
      type: 'datetime',
    },
    yAxis: {
      min: 0,
      //max: 90000,
      title: {
        text: 'Exchange rate'
      }
    },
    legend: {
      enabled: true
    },
    tooltip: {
      valueDecimals: 2,
      valueSuffix: '',
    },
    series: [{
      type: 'line',
      name: 'Current Out',
      data: [
        [Date.UTC(2014, 10, 12, 18, 33), 0],
        [Date.UTC(2014, 10, 12, 17, 42), 0],
        [Date.UTC(2014, 10, 12, 16, 40), 10.83],
        [Date.UTC(2014, 10, 12, 16, 21), 14.83],
        [Date.UTC(2014, 10, 12, 14, 43), 86.34],
        [Date.UTC(2014, 10, 12, 13, 46), 72.35],
        [Date.UTC(2014, 10, 12, 12, 40), 31.69],
        [Date.UTC(2014, 10, 12, 11, 42), 133.37]
      ],
      marker: {
        enabled: true,
        radius: 3
      },
      shadow: true,
      tooltip: {
        valueDecimals: 2,
        shared: true
      }
    }, {
      type: 'line',
      name: 'Voltage',
      data: [
        [Date.UTC(2014, 10, 12, 18, 33), 5.13],
        [Date.UTC(2014, 10, 12, 17, 42), 219],
        [Date.UTC(2014, 10, 12, 16, 40), 644],
        [Date.UTC(2014, 10, 12, 16, 21), 652],
        [Date.UTC(2014, 10, 12, 14, 43), 664],
        [Date.UTC(2014, 10, 12, 13, 46), 628],
        [Date.UTC(2014, 10, 12, 12, 40), 668],
        [Date.UTC(2014, 10, 12, 11, 42), 652],
        [Date.UTC(2014, 10, 12, 10, 46), 648]
      ],
      marker: {
        enabled: true,
        radius: 3
      },
      shadow: true,
      tooltip: {
        valueDecimals: 2,
        shared: true
      }
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

因此,您似乎可能会挂起JSON格式。事实上,这是我的第一次猜测。所以,我看到你已经开始使用他们的一个演示图表 - 一个关于天气和诸如此类的图表。那个例子,特别是真正接近你想要的吗?如果没有,最好的方法是开始 ~~HERE~~ ,因为它列出了所有选项,并且已经设置为在您之后复制并粘贴(至少大致)我们扩展了您感兴趣的所有选项。

保持你的json格式化。解决间距问题的一种快速方法是将您传入的对象文字分配给变量console.log(JSON.stringify(chartVar, null, 4))这应该很好地打印出来。你可以从那里复制和粘贴。

TL; DR我个人会从一个更基本的例子开始,这些例子包含我想要的大部分内容,将自己的数据放入其中,并以最简单的形式使其工作......然后对自定义标签发疯,颜色等。

希望你的眼睛疲惫不堪。 :P

答案 1 :(得分:0)

您的数据需要通过x升序排序。