Chartjs雷达索引标签

Question

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

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

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

我要永远显示值，像下面的图片

Answer 1

在图表JS documentation中，在动画完成使用时，您可以运行功能onAnimationComplete : function(){}

小提琴定义

here

你HTML文件也许这样

<canvas id="my_chart"></canvas> 

然后你的js文件可能看起来像这样

fillColor: "#79D1CF", 
      strokeColor: "#79D1CF", 
      data: [60, 80, 81, 56, 55, 40] 



var ctx = document.getElementById("myChart1").getContext("2d"); 
    var myLine = new Chart(ctx).Line(chartData, { 
    showTooltips: false, 
    onAnimationComplete: function() { 
     //Your other ChartJs features defined here 



var ctx = this.chart.ctx; 
     ctx.font = //your font 
     ctx.fillStyle = //your text color 
     ctx.textAlign = "center"; 
     ctx.textBaseline = "bottom"; 

     this.datasets.forEach(function (dataset) { 
      dataset.points.forEach(function (points) { 
       ctx.fillText(points.value, points.x, points.y - 10);//You can change the x and y position of the text as per your requirement 
      }); 
     }) 
    } 
}); 

//全部归属转到author和thread

Answer 2

以下答案仅适用于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结果：