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結果：