Chart.js

Question

我在网站的多个页面上使用 Chart.js (https://www.chartjs.org/) 来显示不同的图表

为了简化这些图表的添加和修改，我在我的脚本中添加了一些行来配置 Chart.js 不同于基本选项

Chart.defaults.scale.gridLines.display =  true
Chart.defaults.scale.gridLines.drawBorder =  true
Chart.defaults.scale.gridLines.color =  '#f5f5f5'
Chart.defaults.global.legend.display = true;
Chart.defaults.global.legend.labels.fontSize = 13
Chart.defaults.global.legend.labels.fontColor = '#373d3f'
....

问题是在某些选项上我想要不同的 x 轴和 y 轴值，例如 drawOnChartArea 选项

而且我不知道该怎么做，因为它不起作用：

Chart.defaults.scale.xAxes.gridLines.drawOnChartArea = false
Chart.defaults.scale.yAxes.gridLines.drawOnChartArea = true

所以，我仍然被迫在所有图形的选项中添加这些行：

options: {
  scales: {
    xAxes: [{
      gridLines: {
        drawOnChartArea: false,
      }
    }],
    yAxes: [{
      gridLines: {
        drawOnChartArea: true,
      }   
    }],
  },
}

如何在x轴和y轴之间创建不同的全局配置？

是否有另一种方法可以为 Chart.js 创建全局配置（更清洁？更高效？）？

Answer 1

Chart.defaults 包含包含 scales 选项的图表 type 特定部分。您可以使用 console.log(Chart.defaults) 来了解它的外观。

Chart.defaults.bar例如定义如下：

"bar": {
  "hover": {
    "mode": "label"
  },
  "scales": {
    "xAxes": [{
      "type": "category",
      "offset": true,
      "gridLines": {
        "offsetGridLines": true
      }
    }],
    "yAxes": [{
      "type": "linear"
    }]
  }
}

如果嵌套的父对象属性已经定义，可以直接赋值

Chart.defaults.bar.scales.xAxes[0].gridLines.drawOnChartArea = false;

如果尚未定义父对象，则需要将属性与其父对象或对象层次结构一起分配。执行此操作时，请确保还接管以前存在的默认值。

Chart.defaults.bar.legend = { display: false };

请看下面的代码示例。

Chart.defaults.bar.legend = {
  display: false
};
Chart.defaults.bar.scales.xAxes[0].gridLines.drawOnChartArea = false;
Chart.defaults.bar.scales.yAxes[0] = {
  type: 'linear',
  gridLines: {
    drawOnChartArea: false
  },
  ticks: {
    beginAtZero: true
  }
};

new Chart(document.getElementById("myChart"), {
  type: 'bar',
  data: {
    labels: ["A", "B", "C", "D"],
    datasets: [{
      data: [25, 18, 8, 13],
      backgroundColor: ['red', 'blue', 'green', 'orange']
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 
<canvas id="myChart" height="90"></canvas>

Chart.js - 如何在 x 轴和 y 轴之间创建不同的全局配置

Chart.js - How to create a different global configuration between the x axis and the y axis

javascript

jquery

chart.js2