もう言いたいことはタイトルで終わってしまった気がしますが。。
Javascriptの高機能なグラフ描画ツールHighchartsですが、色々とできる分、オプション構造が複雑で理解しにくいところがあったりします。また、公式ドキュメントを見ても判りにくかったりするので、そんなときの解決方法をまとめてみました。
不明点の解決手順
- まずはHighcharts GPTで訊いてみる
- JSFiddleやCodePenで動作確認してみる
- 提示されたコードについてAPI Referenceで仕様チェックする
一応、ChatGPTやGithub Copilotチャットでもそれなりの回答は得られるのですが、Highcharts公式サイトで用意されているAIチャットの「Highcharts GPT」が一番しっくりくる回答をくれるように思います。
おそらくHighcharts専用にトレーニングされているのでしょう。
また、実際のコードを提示した上で実行結果を回答に埋め込んでくれ、提示されたコードはJSFiddleやCodePenで編集できるようになっており、コードのダウンロードまでできるようになっています。
けっこう至れり尽くせりな感じです。
それでもやはりハルシネーションはあったりするので、
JSFiddleやCodePenでの動作確認とAPI Referenceでの仕様チェックはした方が良いでしょう。
流れを見てみよう
例として、「折れ線(line)グラフ」と「面(area)グラフ」を併せて表示した際に、それぞれのtooltipの表示書式を別々に指定する方法を訊いてみます。
コメントに加えてコード提示をしてくれて、その実行結果まで表示してくれます。
提示されたコードはJSFiddleやCodePenで編集＆動作確認ができ、
HTMLとしてコードをダウンロードすることもできます。
▼JSFiddleで開いた画面
▼CodePenで開いた画面
提示コードについては、かなり精度が高いですが、機能しないコードを提示することが結構あります。
例えば、今回提示されたコードは機能しません。
▼今回提示されたコード
Highcharts.chart('container', {
chart: {
type: 'line' // メインのタイプをlineに設定
},
title: {
text: 'LineグラフとAreaグラフの併用'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: '値'
}
},
tooltip: {
shared: true // 両方のシリーズのデータを表示するためにsharedを有効にする
},
series: [{
name: 'Line Series',
type: 'line',
data: [1, 3, 2, 4, 5],
tooltip: {
formatter: function() {
return 'Line Series: <b>' + this.y + '</b>';
}
}
}, {
name: 'Area Series',
type: 'area',
data: [2, 2, 3, 5, 4],
tooltip: {
formatter: function() {
return 'Area Series: <b>' + this.y + '</b>';
}
}
}]
});例えば、「Line Series」のformatterを
tooltip: {
formatter: function() {
return 'おれせん: <b>' + this.y + '</b>';
}
}のように変更しても、tooltipの表示は「Line Series」と表示され「おれせん」は表示されません。
原因をHighcharts GPTに訊いても、「このコードは正しい」とか、「データが間違っていないか」とかで解決策が見つかりません。
そんな時には公式の仕様の確認が必要です。
API Referenceで調べましょう。
Highcharts.chart({series{type:area}.tooltip.pointFormatter})
が使えそうではないかと目途をつけてみます。
ってか、絶対これだよね。
↓↓↓はい、ビンゴ。
これで解決ですね。
ちなみに、Highcharts GPTではチャットの文字数制限があるので、あまり長いコードなどを貼り付けるとアラートが出て回答を得られません。
具体的な制限については不明です。
なお、チャットの履歴保存はできないので、コピペやスクリーンショット等でファイルに保存しておきましょう。
以上です。
- 0
- 0
- 0
- 0
コメント