canvas.jsの棒グラフを更新する

## 備忘録
canvas.jsで描画した棒グラフの要素を足したり減らしたりしたい。

## canvas.jsとは[^1]
>canvasJS はWEBサイトやWEBアプリケーション上で、グラフ、チャート作成するためのJavaScriptライブラリです。線グラフ、棒グラフ、円グラフ、ファネルチャート、を含む30種類のチャートを作成し、iPhone、iPad、Android、Mac やその他PC上で表示が可能です。Chrome、Firefox、Safari、IE (8以降) のブラウザでサポートされています。あらゆるブラウザ、デバイスに対応しているため、WEBアプリケーションの保守性や，機能性を損なうことなく、高品質なダッシュボードを作成出来ます。

ここでは公式のサンプルを元に、グラフを改造する。

- 完成イメージ1 初期状態
![bar1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577794/ef01b1ad-6d9d-fd2b-9856-1149cb8bad04.png)

- 完成イメージ2 「アボカド追加」ボタンを押し、アボカド要素を左から2番目に追加
![bar2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577794/8ddb1985-d67c-f760-19de-4e1aa85d4f7d.png)

- 完成イメージ3 「バナナ削除」ボタンを押し、バナナ要素を削除
![bar3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577794/cf2f5eb0-ce51-2f5d-2881-3d738ee537d6.png)

コードは以下の通り。

```
<!DOCTYPE HTML>
<html>
    <head>
        <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </head>
    <body>
        <div id="chartContainer" style="height: 600px; width: 500px;"></div>
        <button onclick="add({ id: 5, label: 'avocado',  y: 32  }, 1);">アボカド追加</button>
        <button onclick="remove('banana');">バナナ削除</button>
    </body>
    <script type="text/javascript">
        var chart;
        window.onload = function () {
            chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true, // 申し訳程度のアニメーション
                axisY:{
                    labelFontSize:20,
                },
                axisX:{
                    labelFontSize:20,
                },
                title:{
                    text: "My First Chart in CanvasJS"
                },
                data: [
                {
                    type: "column",
                    dataPoints: [
                        { id: 0, label: "apple",  y: 10  },
                        { id: 1, label: "orange", y: 15  },
                        { id: 2, label: "banana", y: 25  },
                        { id: 3, label: "mango",  y: 30  },
                        { id: 4, label: "grape",  y: 28  }
                    ]
                }
                ]
            });
            chart.render();
        }

        const add = (info, index) =>{
            /*
            * indexの位置にinfoを追加し、棒グラフを更新
            */
            let result = [];
            let dataPoints = chart.data[0].dataPoints;
            for(let i=0;i<dataPoints.length;i++){
                if(i === index) result.push(info);
                result.push(dataPoints[i]);
            }
            if(index === dataPoints.length) result.push(info);
            result = result.map(function(v){
                delete v.x; // 自動で設定されたx座標の情報を削除
                return v;
            })
            chart.data[0].set("dataPoints", result);
        };

        const remove = (fruit) =>{
            /*
            * 指定されたfruitの情報を削除し、棒グラフを更新
            */
            let result = chart.data[0].dataPoints.filter(function(v){
                delete v.x; // 自動で設定されたx座標の情報を削除
                return v.label != fruit;
            });
            chart.data[0].set("dataPoints", result);
        };

    </script>
</html>
```

ポイントは棒グラフの要素を追加・削除するタイミングで、自動で設定されたx座標の情報を削除するところ。
これをしておかないと、棒グラフのバーは変更されてもx軸ラベル情報が残ったままになる。

## 参考

[canvas.js 公式 棒グラフ](https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/)


[^1]: [グラフ、チャート作成用JavaScriptライブラリ「CanvasJS」](https://www.tegakari.net/2018/05/canvasjs/)