编辑Chart.js图例模板

时间:2015-10-22 12:05:42

标签: chart.js

我正在使用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显示这些数据(范围有很大差异)的更好方法,那也非常受欢迎。

0 个答案:

没有答案