ExtJSのChartを利用して、棒グラフ表示させる

ある自治体より、雨量計データからグラフを出力してほしいとの依頼があり、
ExtJSのChartを利用して、棒グラフを表示させる。

手順は以下の通り

①ExtJSのファイルを読み込むHTMLファイルの作成
↓
②グラフを表示させるのjsファイル作成

１．ExtJSのファイルを読み込むHTMLファイルの作成

ExtJSのChartは、ext-all-debug.jsには存在せず、別パッケージにあるので、別途読み込む

index.html

<html>
<head>
        <title>雨量計</title>
    <link rel="stylesheet" type="text/css" href="lib/ExtJs6.5.3/build/classic/theme-neptune/resources/theme-neptune-all-debug.css"/>
    <link rel="stylesheet" type="text/css" href="lib/ExtJs6.5.3/build/packages/charts/classic/neptune/resources/charts-all-debug.css"/>
    <script src="lib/ExtJs6.5.3/build/ext-all-debug.js"></script>
    <script src="lib/ExtJs6.5.3/build/classic/theme-neptune/theme-neptune-debug.js"></script>
    <script src="lib/ExtJs6.5.3/build/packages/charts/classic/charts-debug.js"></script>
</head>
<body>
    <script src="js/main.js"></script>
    <div id='chart'></div>
</body>
</html>

<html>

<head>

</head>

<body>

</body>

</html>

２．グラフを表示させるのjsファイル作成

ExtJSのAPIを参考に、jsファイル作成する。
xtypeの「cartesian」は、「Ext.chart.CartesianChart」になる。

main.js

Ext.application({
    name: 'cdnjs test with charts package',
    launch: function() {

        Ext.create({
           xtype: 'cartesian',
           renderTo: 'chart',
           width: 600,
           height: 400,
           store: {
               fields: ['name', 'value'],
               data: [
                {  name: '00:00',  value: 10 }, {
                   name: '00:10',  value: 73  }, {
                   name: '00:20',  value: 56  }, {
                   name: '00:30',  value: 34  }, {
                   name: '00:40',  value: 10 }
                ]
           },
           axes: [{
               type: 'numeric',
               position: 'left',
               title: {
                   text: '降水量',
                   fontSize: 12
               }
           }, {
               type: 'category',
               position: 'bottom',
               title: {
                   text: '日時',
                   fontSize: 12
               },
               fields: 'name'
           }],
           animation: Ext.isIE8 ? false : true,
           series: [{
               type: 'bar',
               subStyle: {
                   fill: ['#388FAD'],
                   stroke: '#1F6D91'
               },
                highlight: {
                    strokeStyle: 'black',
                    fillStyle: 'gold'
                },
               label: {
                   field: 'value',
                   display: 'insideEnd'
               },
               xField: 'name',
               yField: 'value'
           }]
        });
    }
});