设置Chart.js默认显示Point点的值不用鼠标经过才显示

Posted 2021-01-18 天天饱

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已经可以默认显示这些值了，如下图所示：

如果需要设置这些值的字体大小、颜色等也可在里面设置。