投稿
  1. 簡單一點首頁
  2. 編程

Highcharts軟件教程

OEKEU • • 編程

Highcharts是一款非常流行的JavaScript圖表庫，提供了許多類型的圖表，可以製作出用戶友好的、美觀的圖表。本文將為您介紹highcharts軟件使用教程，從多個方面對該軟件進行詳細闡述，包括環境安裝、基本圖表類型、設置、自定義圖表類型等方面，以幫助使用該軟件的初學者快速上手。

一、安裝環境

在使用Highcharts之前，需要安裝一些必要的工具。首先，需要安裝jQuery。Highcharts需要依賴於jQuery，因此請先下載並安裝jQuery，並將其引入到HTML頁面中。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

接下來，需要下載Highcharts源代碼，並將其引入到HTML頁面中：

<script src="https://code.highcharts.com/highcharts.src.js"></script>

安裝完成後，即可開始使用Highcharts。

二、基本圖表類型

Highcharts提供了許多常見的圖表類型，如折線圖、柱狀圖、餅圖等。下面將逐一介紹這些基本圖表類型的使用方法。

1. 折線圖(Line Chart)

折線圖用於顯示數據隨時間變化或其他順序變化的情況，可以用來分析趨勢。下面是一個簡單的折線圖：

<div id="container"></div>
<script>
Highcharts.chart('container', {
  title: {
    text: 'Monthly Average Temperature'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  yAxis: {
    title: {
      text: 'Temperature (°C)'
    }
  },
  series: [{
    name: 'Tokyo',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  }, {
    name: 'New York',
    data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
  }, {
    name: 'Berlin',
    data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
  }, {
    name: 'London',
    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
  }]
});
</script>

上述代碼中，我們首先在HTML頁面中創建了一個div，然後在JavaScript代碼中調用Highcharts.chart()方法，將該div的ID作為第一個參數。接着，我們通過title和subtitle屬性設置圖表的標題和子標題，通過xAxis和yAxis屬性設置坐標軸的標題。最後在series屬性中設置數據。該折線圖由四個系列（Tokyo、New York、Berlin、London）組成，每個系列有12個數據點。

2. 柱狀圖(Column Chart)

柱狀圖用於統計數據，通過高度比較不同柱子的高度來比較數據大小。下面是一個簡單的柱狀圖：

<div id="container"></div>
<script>
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec'
    ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Rainfall (mm)'
    }
  },
  series: [{
    name: 'Rainfall',
    data: [
      49.9,
      71.5,
      106.4,
      129.2,
      144.0,
      176.0,
      135.6,
      148.5,
      216.4,
      194.1,
      95.6,
      54.4
    ],
    color: '#3498db'
  }]
});
</script>

上述代碼中，我們通過將chart屬性設置為column來創建一個柱狀圖。接着，我們設置圖表的標題、子標題和坐標軸。最後，在series屬性中設置數據。

3. 餅圖(Pie Chart)

餅圖用於顯示各個部分佔比，常用於可視化數據。下面是一個簡單的餅圖：

<div id="container"></div>
<script>
Highcharts.chart('container', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  title: {
    text: 'Browser market shares in January, 2018'
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  accessibility: {
    point: {
      valueSuffix: '%'
    }
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
      }
    }
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
      name: 'Chrome',
      y: 61.41,
      sliced: true,
      selected: true
    }, {
      name: 'Internet Explorer',
      y: 11.84
    }, {
      name: 'Firefox',
      y: 10.85
    }, {
      name: 'Edge',
      y: 4.67
    }, {
      name: 'Safari',
      y: 4.18
    }, {
      name: 'Sogou Explorer',
      y: 1.64
    }, {
      name: 'Opera',
      y: 1.6
    }, {
      name: 'QQ',
      y: 1.2
    }, {
      name: 'Other',
      y: 2.61
    }]
  }]
});
</script>

上述代碼中，我們通過將chart屬性設置為pie來創建一個餅圖。接着，我們設置圖表的標題、tooltip、accessibility和plotOptions。在series屬性中，設置餅圖的數據。

三、設置

Highcharts提供了許多配置選項，可以幫助用戶更好地控制圖表的外觀和行為。下面將介紹一些常用的設置選項。

1. 數據標籤(Data Labels)

數據標籤顯示每個數據點的具體值，便於用戶查看數據的具體數值。下面是一個數據標籤的例子：

<div id="container"></div>
<script>
Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Historic World Population by Region'
  },
  subtitle: {
    text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia</a>'
  },
  xAxis: {
    categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
    title: {
      text: null
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Population (millions)',
      align: 'high'
    },
    labels: {
      overflow: 'justify'
    }
  },
  tooltip: {
    valueSuffix: ' millions'
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      }
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -40,
    y: 80,
    floating: true,
    borderWidth: 1,
    backgroundColor:
      Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
    shadow: true
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Year 1800',
    data: [107, 31, 635, 203, 2]
  }, {
    name: 'Year 1900',
    data: [133, 156, 947, 408, 6]
  }, {
    name: 'Year 2000',
    data: [814, 841, 3714, 727, 31]
  }, {
    name: 'Year 2016',
    data: [1216, 1001, 4436, 738, 40]
  }]
});
</script>

上述代碼中，我們在plotOptions下的bar屬性中設置了數據標籤。該數據標籤將在每個條形的頂部顯示相應的數值。可以設置數據標籤的位置、格式和樣式等屬性。

2. 動畫(Animation)

動畫效果可以使圖表更生動、更有趣，便於用戶更好地理解數據。下面是一個簡單的動畫效果的例子：

<div id="container"></div>
<script>
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec'
    ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Rainfall (mm)'
    }
  },
  series: [{
    name: 'Rainfall',
    data: [
      49.9,
      71.5,
      106.4,
      129.2,
      144.0,
      176.0,
      135.6,
      148.5,
      216.4,
      194.1,
      95.6,
      54.4
    ],
    color: '#3498db',
    animation: {
      duration: 2000,
      easing: 'easeOutBounce'
    }
  }]
});
</script>

上述代碼中，我們在series下的屬性中設置了動畫效果。該動畫效果將在加載圖表時播放。

四、自定義圖表類型

Highcharts提供了一組靈活的API，可以幫助用戶實現自定義的圖表類型。下面是一個簡單的自定義圖表類型的例子：

<div id="container"></div>

<script>

// 自定義圖表類型

Highcharts.seriesType('myChartType', 'line', {

// 添加自定義的方法和屬性

myMethod: function () {

console.log('This is my custom method.');

},

myProperty: 'This is my custom property.'

}, {

// 添加自定義的默認選項

myOption: 42

});
Highcharts.chart('container', {
 chart: {
 type: 'myChartType'
 },
 title: {
 text: 'My custom chart type'
原創文章，作者：OEKEU，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/361763.html
贊 (0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
OEKEU的頭像OEKEU
0 0
上一篇 2025-02-25 18:17
下一篇 2025-02-25 18:17

相關推薦

發表回復

登錄後才能評論