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); }