チャートを実装するライブラリとして日本では「chart.js」が最もポピュラーで認知されている傾向にあるようですが、世界では「Highcharts」が主流という記事を見て、少し触ってみようと思いました。本当は「オプションタグで選択したグラフに切り替わったら面白いなー」と思ったのが一番初めで、それを「Highcharts」で実装しようって流れで作ったって経緯だったりするんですけど。
結論から言うと「Highchartsは多機能で使いやすい」って感じです。
詳細まで確認していないがアクセシビリティを設定できたり、グラフのエクスポート機能があったり、
基本実装はchart.jsとほぼ変わらない印象で、追加機能を増やしたい場合にHighcharts.jsを使うメリットがありそう。
また、なにかと便利そうなプロパティがあったりするので今後使うにあたって活用してみたい機能がたくさんありました。
※今回作成してみたチャート
ソースコードはこちら
html index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
<title>気になるチャートJSライブラリを体験</title>
</head>
<body>
<main>
<div class="wrapper">
<select name="mySelect" id="mySelect">
</select>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
</div>
</main>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="main.js"></script>
</body>
</html>
javascript main.js
window.addEventListener("load", () => {
const CHARTTYPES = [
"line", // 折れ線グラフ
"area", // 面グラフ
"column", // 棒グラフ
"bar", // 横棒グラフ
"pie", // 円グラフ
"scatter", // 散布図
];
const chartType = document.getElementById("mySelect");
CHARTTYPES.forEach((type) => {
const optionElement = document.createElement("option");
optionElement.value = type;
optionElement.text = type;
chartType.appendChild(optionElement);
});
const selectElement = document.getElementById("mySelect");
let selectedValue = selectElement.value;
// 初回レンダリング
renderChart(selectedValue);
// オプションの内容変更した時発火
selectElement.addEventListener("change", (event) => {
selectedValue = event.target.value;
renderChart(selectedValue);
});
});
// チャートのレンダリングを行う
function renderChart(selectedValue) {
// data.jsonからデータを取得
fetch("data.json")
.then(response => response.json())
.then(data => {
console.log(data);
Highcharts.chart('container', {
// グラフ属性設定
// 各属性の詳細：https://api.highcharts.com/highcharts/
chart: {
type: selectedValue, // チャートの種類を変更する部分
},
title : {
text: '商品A～商品Eの2023年度月間売上'
},
xAxis : {
categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis : {
title: {
text: '売上高 (万円)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip : {
valueSuffix: '万円'
},
legend : {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
//JSONデータを出力する
series : data,
responsive: {
rules: [{
condition: {
maxWidth: 600
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
})
.catch(error => {
// エラーハンドリング
console.error('ファイルの取得に失敗しました:', error);
});
};
json data.json
[
{
"name": "商品A",
"data": [23.5, 32.2, 45.6, 20.3, 15.3, 56.4, 49.9, 53.5, 55.5, 33.2, 46.3, 43.2]
},
{
"name": "商品B",
"data": [15.3, 18.2, 25.7, 23.1, 26.9, 27.4, 30.5, 38.6, 40.2, 48.3, 35.2, 25.4]
},
{
"name": "商品C",
"data": [18.5, 22.5, 29.3, 37.1, 39.3, 45.8, 44.3, 48.2, 43.6, 40.3, 37.7, 33.0]
},
{
"name": "商品D",
"data": [7.2, 6.3, 8.9, 10.2, 12.5, 16.2, 18.2, 17.3, 16.5, 12.8, 10.3, 13.9]
},
{
"name": "商品E",
"data": [36.6, 37.2, 39.1, 30.2, 30.9, 28.3, 25.3, 24.8, 23.3, 20.7, 18.3, 19.7]
}
]
備忘録なので詳しくは説明しませんが、
実装に困っている方が見えたら質問ください。