1. 程式人生 > >Highcharts技巧總結(持續更新)

Highcharts技巧總結(持續更新)

1.動態顯示隱藏dataLables

Highcharts沒有提供方法動態顯示或者隱藏dataLables,可以通過Jquery顯示或者隱藏dataLables。

顯示點值程式碼:

$('#container .highcharts-data-labels').show();
隱藏點值程式碼:
$('#container .highcharts-data-labels').hide();

2.自定義顯示

Highcharts提供了formatter格式化顯示內容,比如要讓dataLabels顏色為當前series線條顏色。

plotOptions: {
     line: {
           dataLabels: {
               enabled: true,
               formatter:function(){
                   console.log(this.series);
                   return '<span style="color:'+this.series.color+'">'+this.y+'</span>';
               }
           }
       }
   },
如果不清楚color對應屬性,可以直接console.log(this.series)打印出this.series物件,然後在除錯工具中檢視該物件並找到color對應的鍵名稱。