mechanical/static/optim.js

function drawLineCanvas2(ctx, data) {
    window.myLine = new Chart(ctx, {  //第二個 chart
        type: 'line', // 型態
        data: data,
        options: {
            plugins: {
                legend: {
                    display: false,
                },
            },
            responsive: true,
            legend: { //是否要顯示圖示
                display: true,
            },
            tooltips: { //是否要顯示 tooltip
                enabled: true
            },
            scales: {  //是否要顯示 x、y 軸 
                x:{
                    title: {
                        display: true,
                        text: '時間',
                        color: '#000',
                        font: {
                            family: 'Times',
                            size: 20,
                            style: 'normal',
                            lineHeight: 1.2
                        },
                    },
                },              
                y: {
                    min: 20,
                    max: 40,
                    title: {
                        display: true,
                        text: '濕球溫度(°C)',
                        color: '#000',
                        font: {
                            family: 'Times',
                            size: 20,
                            style: 'normal',
                            lineHeight: 1.2
                        },
                    },
                }
            },

        },
        plugins: [ChartDataLabels],
        // options: {
        //     plugins:{
        //         legend:{
        //             display:false,
        //         },
        //         datalabels: {
        //             color: 'red',
        //             anchor: 'end'
        //         },
        //     }
        // },

    });
};

var lineChartData = {
    labels: ["36小時前", "30小時前", "24小時前", "18小時前", "12小時前", "6小時"], //顯示區間名稱
    datasets: [{
        label: 'x', // tootip 出現的名稱
        lineTension: 0, // 曲線的彎度，設0 表示直線
        backgroundColor: "#ea464d",
        borderColor: "#ea464d",
        borderWidth: 5,
        data: [25, 32, 29, 31, 27, 33], // 資料
        datalabels: {
            // color: 'red',
            align: 'end',
            anchor: 'end',
            borderRadius: 4,
            color: 'black',
            font: {
                weight: 'bold',
                size: 24,
            },

        },
        fill: false, // 是否填滿色彩
    }, {
        label: '下限提示線',
        lineTension: 0,
        fill: false,
        backgroundColor: "#29b288",
        borderColor: "#29b288",
        borderWidth: 5,
        data: [28, 28, 28, 28, 28, 28],
        datalabels: {
            display: false,
        },
    },]
};

window.onload = function () {
    var ctx = document.getElementById("optim-predict").getContext("2d");
    drawLineCanvas2(ctx, lineChartData);
}