Question

我有10多个图表，所有图表都是使用ChartJS创建的折线图。

图表一

var ctx = document.getElementById(cid).getContext('2d');
Chart.defaults.global.elements.line.tension = 0;
var chartOne = new Chart(ctx, {.....}

图二

var ctx = document.getElementById(cid).getContext('2d');
var chartTwo = new Chart(ctx, {.....}

对于chartOne，我将线tension定义为0，而chartTwo没有线张力配置，应该默认为0.4。但是，chartTwo正在采用chartOne的“线张力”配置。

如何仅为特定画布设置Chart.defaults？

Answer 1

使用Chart.defaults意味着多个图表具有相同的值，因此就意味着您不能具有两个单独的Chart.defaults设置。

解决方案：

在更清楚地了解您的要求之后，可以使用常用属性进行操作。像下面一样，将data变量中的所有不常见数据集推入data中，并将其传递给图表中的datasets。

var data = [{
  label: 'India',
  data: [50, 55, 45, 43, 39],
  borderColor: '#666699'
}, {
  label: 'UAE',
  data: [15, 22, 19, 17, 19],
  borderColor: '#ff9933'
}, {
  label: 'US',
  data: [75, 62, 77, 81, 77],
  borderColor: '#33cccc'
}, {
  label: 'Oman',
  data: [15, 18, 23, 19, 21],
  borderColor: '#333300'
}, {
  label: 'Qatar',
  data: [26, 28, 27, 25, 26],
  borderColor: '#00cc99'
}, {
  label: 'Canada',
  data: [75, 77, 72, 79, 71],
  borderColor: '#cc33ff'
}, {
  label: 'Australia',
  data: [22, 28, 25, 23, 26],
  borderColor: '#3399ff'
}, {
  label: 'China',
  data: [51, 35, 41, 43, 39],
  borderColor: '#ff0000'
}];


data.forEach(function(obj) {
  obj.pointBackgroundColor = '#fff',
    obj.pointBorderWidth = 2,
    obj.borderWidth = 2,
    obj.lineTension = 0,
    obj.fill = false
});

console.log(data)// pass data var to datasets in chart

完成工作fiddle here。

希望它能对您有所帮助。

ChartJS仅将默认选项设置为特定的画布，而不是全局设置

1 个答案: