動態更新工具提示日期格式高圖

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與現有的圖表選項，然後重新創建圖表。