ハイチャート構成構文
この章では、Highcharts を使用してチャートを生成する構成をいくつか紹介します。
ステップ 1: HTML ページを作成する
HTML ページを作成し、jQuery および Highcharts ライブラリを導入します:
ファイル名: HighchartsTest.htm
<html>
<head>
<title>Highcharts 教程 | php中文网</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/try/demo_source/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
});
</script>
</body>
</html>例の ID コンテナーを持つ div は、Highcharts によって描画されたチャートを含めるために使用されます。
ステップ 2: 設定ファイルを作成する
Highcharts ライブラリは設定に json 形式を使用します。
$('#container').highcharts(json);ここでの json は、json データ形式と json 形式の設定を使用してグラフを描画することを意味します。手順は次のとおりです:
タイトル
グラフのタイトルを設定します:
var title = {
text: '月平均气温'
};サブタイトル
グラフのサブタイトルを設定します:
var subtitle = {
text: 'Source: php.cn'
};X 軸
X 軸に表示される項目を設定します。
var xAxis = {
categories: ['一月', '二月', '三月', '四月', '五月', '六月'
,'七月', '八月', '九月', '十月', '十一月', '十二月']
};Y軸
Y軸に表示する項目を設定します。
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};プロンプト情報
設定プロンプト情報:
var tooltip = {
valueSuffix: '\xB0C'
}表示方法
右揃えにグラフを設定します:
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};データ
グラフに表示されるデータを設定します。各シリーズは配列であり、各アイテムは画像内に曲線を生成します。
rreeeTEP3：JSONデータの作成
[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します
