データ統計および分析ビジネスでは、棒グラフ、円グラフ、および曲線グラフを 1 つのグラフに表示する必要がある場合があります。つまり、棒グラフから特定のデータを確認することができます。棒グラフでは変化の傾向が、円グラフではデータの各部分の割合がわかります。 Highcharts では、3 つの画像を 1 つに結合する効果を簡単に実現できます。
var チャート;
$(document).ready(function() {
chart = new Highcharts.Chart({
チャート: {
renderTo: 'コンテナ',
デフォルトシリーズタイプ: 'エリア'
}、
タイトル: {
テキスト: '地域別の世界の人口増加の歴史と推定'
}、
サブタイトル: {
テキスト: '出典: Wikipedia.org'
}、
x軸: {
カテゴリ: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
目盛りの配置: 'on',
タイトル: {
有効: false
}
}、
y 軸: {
タイトル: {
テキスト: '数十億'
}、
ラベル: {
フォーマッタ: function() {
この値を返す / 1000;
}
}
}、
ツールチップ: {
フォーマッタ: function() {
戻ります ''
this.x ': ' Highcharts.numberFormat(this.y, 0, ',') ' 百万';
}
}、
プロットオプション: {
エリア: {
スタッキング: '通常'、
ラインカラー: '#666666',
lineWidth: 1,
マーカー: {
lineWidth: 1,
ラインカラー: '#666666'
}
}
}、
シリーズ: [{
名前: 'アジア'、
データ: [502, 635, 809, 947, 1402, 3634, 5268]
}、{
名前: 'アフリカ'、
データ: [106, 107, 111, 133, 221, 767, 1766]
}、{
名前: 'ヨーロッパ'、
データ: [163, 203, 276, 408, 547, 729, 628]
}、{
名前: 'アメリカ'、
データ: [18, 31, 54, 156, 339, 818, 1201]
}、{
名前: 'オセアニア'、
データ: [2, 2, 2, 6, 13, 30, 46]
}]
});
});
上記がこの記事で説明した内容のすべてです。jQuery を使用してヒストグラムや円グラフを描画するすべての人に役立つことを願っています。