动态更新工具提示日期格式高图

Question

我想动态更新工具提示日期格式。与按钮点击事件一样，工具提示日期格式将更改为另一个。看看我的html：

<div id="container" style="height: 300px"></div> 
<button id="dateFormate">changeDateFormat</button> 
on Click the button date format chang to %m-%d-%y 

的Javascript

$(function() { 
$('#container').highcharts({ 

    xAxis: { 
     type: 'datetime' 
    }, 

    tooltip: { 
     xDateFormat: '%Y-%m-%d', 
     shared: true 
    }, 

    plotOptions: { 
     series: { 
      pointStart: Date.UTC(2012, 0, 1), 
      pointInterval: 24 * 3600 * 1000 
     } 
    }, 

    series: [{ 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
    }, { 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse() 
    }] 

}); 

}）;

http://jsfiddle.net/hL8ae0yr/

Answer 1

您也可以在系列中定义工具提示格式，然后使用新格式更新系列数组。

实施例：http://jsfiddle.net/hL8ae0yr/1/

chart.series[0].update({ 
      tooltip:{ 
       xDateFormat: '%Y/%m/%d', 
      } 
}); 

Answer 2

这可以通过重建图表来完成。图表渲染完成后，我无法找到访问chart.tooltip.options进行重置的方法。所以，你可以做这样的事情：

$("#dateFormate").click(function() { 
    var theChart = $('#container').highcharts(); 
    var initOptions = theChart.options; 
    var options0 = { 
     tooltip: { 
      xDateFormat: '%m-%d-%y' 
     } 
    }; 

    optionsNew = Highcharts.merge(initOptions, options0); 

    $('#container').highcharts(optionsNew); 
}); 

这将合并新tooltip.xDateFormat与现有的图表选项，然后重新创建图表。