Question

我创建了一些包含一些数据的高图示例。 you can see it here.

var chart = Highcharts.chart('container', {
     tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x: %b %e}: <b>{point.y:.2f}</b>'
        },
series: [{
        name : "tooltip 1",
    data: [29.9, 71.5, 106.4, 129.2, 144.0]
}]
});


$('#button').click(function () {
    chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5]);
});

我想在点击#button时，我们设置新的工具提示名称，例如： tooltip 2 。

如何在点击事件后设置新的工具提示名称？

Answer 1

我认为您想要更改将反映在工具提示中的系列名称

Fiddle

$('#button').click(function () {
    chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5]);
    chart.series[0].name="tooltip 2";
});

var chart = Highcharts.chart('container', {
  tooltip: {
    headerFormat: '<b>{series.name}</b><br>',
    pointFormat: '{point.x: %b %e}: <b>{point.y:.2f}</b>'
  },
  series: [{
    name: "tooltip 1",
    data: [29.9, 71.5, 106.4, 129.2, 144.0]
  }]
});


// the button action
$('#button').click(function() {
  chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5]);
  chart.series[0].name = "tooltip 2";
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Set new data</button>

setData时的Highchart更新工具提示

1 个答案: