highchartsの使用と構成


紹介:HighchartsシリーズのソフトウェアはHighcharts JS、Highstock JS、Highmaps JSの3種類のソフトウェアを含んで、すべて純JavaScriptが書いたHTML 5グラフライブラリで、すべてのソースコードが開放されて、個人と非商業用途は任意に使用してソースコードの編集ができます.中国語ネットアドレスhttps://www.hcharts.cn/docs/start-introduction
Highchartsa:基本グラフは主に直線図、曲線図、領域図、柱状図、餅状図、散状点図、計器図、気泡図、滝流図など20種類以上のグラフを含む.
Highstock:株式グラフコントロールには、複数の高度なナビゲーションコンポーネント(データ時間範囲の事前設定、日付セレクタ、スクロールバー、平行移動、スケール機能)があります.
Highmaps:優れた地図コンポーネント販売、選挙結果など、地理的な関係に密接なインタラクティブな地図グラフを簡単に作成できます.
Highchartsa使用:公式リソースパッケージをダウンロードするか、直接CDNファイルCDNを導入します.
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js">script>

コンテナを作成し、次の操作のためにサイズを指定します.
<div id="container" style="width:400px;height:400px">div>

ハイチャーターでチャートを作成するにはチャートを使用します.chart関数には2つのパラメータがあります.1つ目のパラメータはコンテナのidで、2つ目はグラフ構成情報です.コードは次のとおりです.

<html>
<head>
    <title>Testtitle>
head>
<script src="highcharts.js">script>
<script src="JQuery.js">script>
<body>
<div id="container" style="width:400px;height:400px">div>

<script type="text/javascript">
//     
var options={
    //            
     credits: { enabled: false },
    chart:{
        type:"bar"  //       ,      (line)
    },
     title: {
                text: '       '                 //   
            },
            xAxis: {
                categories: ['  ', '  ', '  ']   // x    
            },
            yAxis: {
                title: {
                    text: '     '                // y    
                }
            },
            series: [{                              //    
                name: '  ',                        //     
                data: [1, 0, 4]                     //   
            }, {
                name: '  ',
                data: [5, 7, 3]
            }]
};
var chart=Highcharts.chart("container",options);
script>
body>
html>

HighstockとHighmapsの続きは