設置Chart.js默認顯示Point點的值不用鼠標經過才顯示

Chart.js默認的顯示方式是鼠標經過Point點的時候才會顯示這個點的值，代碼如下：

            var testdata: {
                 periodNum: ["2018121","2018122","2018123","2018124","2018125","2018126","2018127","2018128","2018129","2018130","2018131","2018132","2018133","2018134","2018135","2018136","2018137","2018138","2018139","2018140","2018141","2018142","2018143","2018144","2018145","2018146","2018147","2018148","2018149","2018150","2018151","2018152","2018153","2018154","2018155","2018156","2018157","2018158","2018159","2018160"],
                 prriodvalue: [2,3,3,2,4,4,1,1,3,3,3,2,3,1,1,3,2,3,3,2,2,1,1,1,1,2,3,3,1,3,4,1,5,2,2,3,3,3,1,1]
    }
            var labelData = testdata.periodNum
            var chartData = testdata.prriodvalue
            var ctx = document.getElementById('test-canvas').getContext('2d');
            ctx.lineJoin = 'miter'
            var chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labelData,
                    datasets: [{
                        label: "Point點",                              //名稱
                        borderColor: 'red',                            //線條顏色
                        data: chartData,                               //數據
                        borderWidth: '1px',                            //線條大小
                        pointBackgroundColor: 'red',                   //點填充顏色
                        pointBorderColor: '#000',                      //點邊框顏色
                        pointBorderWidth: '1px',                       //點邊框大小
                        pointRadius: '5',                              //點的半徑
                        pointStyle: 'rectRot',                         //點樣式
                        fill: false,                                   //填充顏色
                        tension: 0                                     //張力，0為沒曲線
                    }]
                },
                options: {}

　　

這樣子所繪制出來的效果如下圖所示：

當鼠標經過2018139那個點的時候才會顯示3，但是有時候我們需要默認顯示這些值，這個時候需要在options中添加如下代碼：

                  options: {
                      animation: {
                      onComplete: function() {
                        var chartInstance = this.chart,
                        ctx = chartInstance.ctx;

                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';

                        this.data.datasets.forEach(function(dataset, i) {
                          var meta = chartInstance.controller.getDatasetMeta(i);
                          meta.data.forEach(function(bar, index) {
                            var data = dataset.data[index];
                            ctx.fillText(data, bar._model.x, bar._model.y - 5);
                          });
                        });
                      }
                    }
                }

添加之后你就會發現canvas已經可以默認顯示這些值了，如下圖所示：

如果需要設置這些值的字體大小、顏色等也可在里面設置。