グラフデータの配列を変数として扱う

累計距離を日々のランニング距離を入力すれば自動計算するようにする。
その日までの累計距離の配列を変数化してChart.jsのdata:部に反映する。
Chart.js対応部内では制約があるため、それより前で累計の配列を変数化する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

<canvas id="myChart1"></canvas>
<script type="text/javascript">
/*dist 走行距離/日 */
let dist = new Array(13, 0, 10.5, 0, 0, 13, 0,13.5,5.6,0,4.1,0,0,0,14.8,0,0,0,5.6);
let a = new Array(30)
let goal =110 //該当月の目標距離
let gokei = 0;
for (let i = 0; i < 31; i++) {
  gokei += dist[i];
  a[i] = gokei;　//累計の配列を作成
  console.log(a[i]);
}

　/* 以下Chart.js対応部　上記distを配列に追加すれば累計は自動計算*/
    var ctx = document.getElementById('myChart1').getContext('2d');
    var myChart1 = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['5/01', '5/02', '5/03', '5/04', '5/05', '5/06', '5/07','5/08','5/09','5/10','5/11', '5/12', '5/13', '5/14', '5/15', '5/16', '5/17','5/18','5/19','5/20','5/21', '5/22', '5/23', '5/24', '5/25', '5/26', '5/27','5/28','5/29','5/30','5/31'],
            datasets: [{
                label: '月目標',
                type: "line",
                fill: false,
                pointRadius:0, //折れ線グラフのポインター消去
                data: [goal, goal, goal, goal, goal, goal, goal,goal,goal,goal,goal,goal,goal,goal,goal,goal,goal,goal,goal,goal,goal,goal,goal,goal,goal,goal,goal,goal,goal,goal],
                borderColor: "rgb(187, 185, 185)",
                yAxisID: "y-axis-1",
            }, {
                label: '累計距離',
                type: "line",
                fill: false,
                data:[a[0],a[1],a[2],a[3],a[4],a[5],a[6],a[7],a[8],a[9],a[10],a[11],a[12],a[13],a[14],a[15],a[16],a[17],a[18],a[19],a[20],a[21],a[22],a[23],a[24],a[25],a[24],a[25],a[26],a[27],a[28],a[29],a[30],a[31]],
                borderColor: "rgb(54, 162, 235)",
                yAxisID: "y-axis-1",
            }, {
                label: '走行距離',
                data: [dist[0], dist[1], dist[2], dist[3],dist[4],dist[5],dist[6],dist[7],dist[8],dist[9],dist[10],dist[11],dist[12],dist[13],dist[14],dist[15],dist[16],dist[17],dist[18],dist[19],dist[20],dist[21],dist[22],dist[23],dist[24],dist[25],dist[24],dist[25],dist[26],dist[27],dist[28],dist[29],dist[30],dist[31]],
                borderColor: "rgb(255, 5, 5)",
                backgroundColor: "rgba(255, 5, 5, 0.5)",
                yAxisID: "y-axis-2",
            }]
        },
        options: {
            tooltips: {
                mode: 'nearest',
                intersect: false,
            },
            responsive: true,
            scales: {
                yAxes: [{
                    id: "y-axis-1",
                    type: "linear",
                    position: "left",
                    ticks: {
                        max: 200,
                        min: 0,
                        stepSize: 10
                    },
                }, {
                    id: "y-axis-2",
                    type: "linear",
                    position: "right",
                    ticks: {
                        max: 200,
                        min: 0,
                        stepSize: 10
                    },
                    gridLines: {
                        drawOnChartArea: false,
                    },
                }],
            },
        }
    });

</script>