编辑Chart.js图例模板

Question

我正在使用chart.js开展项目.我想以雷达图表的形式显示数据.我们有5种不同的数据源.为了使我们的雷达图表更具可读性,我们将这些数据源中的一部分划分了(其中一些数据源的值比其他数据源高得多),我们的图表看起来很好.

但是现在唯一的问题是,在我们的图例中,数据显示为小数位(因为我们已将其划分).

有谁知道如何编辑chart.js中的图例模板,以便我们可以将显示的结果与我们的某些数据集相乘(这样用户看不到小数点数据)？

这个函数在我们的app.js文件中创建了chart.js的数据集(注意一些值被划分):

  return largestStations.reduce(function(previousValue, currentValue, index, array) {
previousValue.datasets[index] = {
  label: currentValue.commonName.replace(' Underground Station', ''),
  // add chart formatting (needs to be made dynamic)
  fillColor: "rgba(255, 0, 0, 0.2)",
  strokeColor: "rgba(255, 0, 0, 1)",
  pointColor: "rgba(255, 0, 0, 1)",
  pointStrokeColor: "#fff",
  pointHighlightFill: "#fff",
  pointHighlightStroke: "rgba(220,220,220,1)",
  // end of chart formatting
  data: [
    app.getValueFromStation(currentValue, 'Gates') / 10,
    app.getValueFromStation(currentValue, 'Lifts'),
    app.getValueFromStation(currentValue, 'Payphones'),
    app.getValueFromStation(currentValue, 'Escalators') / 3,
    app.getValueFromStation(currentValue, 'Cash Machines')
  ]
};
return previousValue; }

我们目前正在使用chart.js中的默认图例模板,如下所示:

<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>

编辑图例模板是解决此问题的最佳方法吗？如果有人知道使用chart.js显示这些数据(范围有很大差异)的更好方法,那也非常受欢迎.

Answer 1

这是来自github：

您可以向工具提示标签添加个性化回调，在其中舍入值，例如

1 - tooltipItem.yLabel.toFixed(2) 将返回具有 2 位小数的值。

2.123.toFixed(2)
>> "2.12"
2.0001.toFixed(2)
>> "2.00"

2- Math.round(tooltipItem.yLabel * 100) / 100 将返回四舍五入到最接近的小数点后第二位的值。

Math.round(2.123 * 100) / 100
>> 2.12
Math.round(2.00001 * 100) / 100
>> 2

tooltips: {
callbacks: {
    label: function(tooltipItem, data) {
        var label = data.datasets[tooltipItem.datasetIndex].label || '';

        if (label) {
            label += ': ';
        }
        label += tooltipItem.yLabel.toFixed(2);
        return label;
    }
}

}