javascript - Chartjs雷达索引标签

我正在使用chartjs绘制雷达图。

该值显示在图表的悬停位置，但我想始终显示该值。在打印页面时，我需要更改 View 以显示数据。

这是我当前的图表。标签显示在悬停上



我想始终显示该值，如下图所示

最佳答案

以下答案仅适用于Chart.js v2。
如果要使用v1解决方案，请检查pritishvaidya's。

您要使用图表选项的animation属性:

options : {
    animation: {
        duration: 500,
        onComplete: function () {
            // The code here will be executed at the end of the animation
            // (after 500ms here)

            // You can get the canvas context using the following :
            var ctx = this.chart.ctx;
            // `this` being the chart instance
        }
    }
}

现在，您想在其上方添加点的值，这可以使用数据模型来完成，您可以在数据集属性中找到该数据模型:

onComplete: function() {
    // You get the canvas context, to help you writing what you want
    var ctx = this.chart.ctx;

    // Here you set the context with what you need (font, size, color ...)
    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
    ctx.textAlign = 'center';
    ctx.fillStyle = 'black';

    // For every dataset ...
    this.data.datasets.forEach(function(dataset) {

        // For every data in the dataset ...
        for (var i = 0; i < dataset.data.length; i++) {

            // We get its model
            var model = dataset._meta[0].data[i]._model;

            // And write the data above it
            ctx.fillText(dataset.data[i], model.x, model.y - 2);
            // You can edit the last two arguments according to what you need
        }
    });
}

遵循上述代码的结果，您可以找到on this jsFiddle:

关于javascript - Chartjs雷达索引标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39974482/