【揭秘Highcharts API】參數設置全攻略，輕鬆掌握圖表繪製技巧

引言

Highcharts 是一個功能富強的 JavaScript 圖表庫，可能創建各品種型的圖表，如折線圖、柱狀圖、餅圖等。它廣泛利用於各種 Web 利用順序中，用於可視化數據。本文將具體介紹 Highcharts API 的參數設置，幫助開辟者輕鬆控制圖表繪製技能。

Highcharts API 簡介

Highcharts API 供給了一系列的參數設置，用於自定義圖表的各個方面，包含圖表範例、標題、坐標軸、圖例、數據系列等。經由過程公道設置這些參數，可能創建出滿意差別須要的圖表。

圖表範例

Highcharts 支撐多種圖表範例，以下是一些常用的圖表範例及其設置：

折線圖

chart: {
  type: 'line'
},
title: {
  text: '折線圖示例'
},
xAxis: {
  categories: ['一月', '二月', '三月', '四月', '蒲月']
},
yAxis: {
  title: {
    text: '數值'
  }
},
series: [{
  name: '數據系列1',
  data: [29.9, 71.5, 106.4, 129.2, 144.0]
}]

柱狀圖

chart: {
  type: 'column'
},
title: {
  text: '柱狀圖示例'
},
xAxis: {
  categories: ['一月', '二月', '三月', '四月', '蒲月']
},
yAxis: {
  title: {
    text: '數值'
  }
},
series: [{
  name: '數據系列1',
  data: [29.9, 71.5, 106.4, 129.2, 144.0]
}]

餅圖

chart: {
  type: 'pie'
},
title: {
  text: '餅圖示例'
},
plotOptions: {
  pie: {
    allowPointSelect: true,
    cursor: 'pointer',
    dataLabels: {
      enabled: true,
      format: '<b>{point.name}</b>: {point.percentage:.1f} %'
    }
  }
},
series: [{
  name: '數據系列',
  colorByPoint: true,
  data: [{
    name: '類別1',
    y: 29.9
  }, {
    name: '類別2',
    y: 71.5
  }, {
    name: '類別3',
    y: 106.4
  }, {
    name: '類別4',
    y: 129.2
  }, {
    name: '類別5',
    y: 144.0
  }]
}]

高等參數設置

標題

title: {
  text: '高等標題設置',
  style: {
    color: '#333',
    fontSize: '14px',
    fontWeight: 'bold'
  }
}

坐標軸

xAxis: {
  title: {
    text: 'X軸標題'
  },
  categories: ['一月', '二月', '三月', '四月', '蒲月']
},
yAxis: {
  title: {
    text: 'Y軸標題'
  }
}

圖例

legend: {
  layout: 'vertical',
  align: 'right',
  verticalAlign: 'middle',
  borderWidth: 1
}

數據系列

series: [{
  name: '數據系列1',
  data: [29.9, 71.5, 106.4, 129.2, 144.0]
}, {
  name: '數據系列2',
  data: [48.9, 38.8, 49.3, 71.4, 104.1]
}]

總結

經由過程以上介紹，信賴你曾經對 Highcharts API 的參數設置有了基本的懂得。在現實開辟過程中，可能根據須要調劑跟組合這些參數，輕鬆創建出滿意各種須要的圖表。