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

我在网站的几个页面上使用Chart.js（）来显示不同的图表

为了简化这些图表的添加和修改，我在脚本中添加了几行代码，以便以不同于基本选项的方式配置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创建全局配置（更干净？更高效？）

Chart。默认值包含Chart
类型
特定部分，其中包括
比例
选项。您可以使用
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={
显示：假
};
Chart.defaults.bar.scales.xAxes[0].gridLines.drawOnChartArea=false；
Chart.defaults.bar.scales.yAxes[0]={
类型：'线性'，
网格线：{
drawOnChartArea:假
},
滴答声：{
贝吉纳泽罗：是的
}
};
新图表（document.getElementById（“myChart”）{
类型：'bar'，
数据：{
标签：[“A”、“B”、“C”、“D”]，
数据集：[{
数据：[25,18,8,13]，
背景颜色：[“红色”、“蓝色”、“绿色”、“橙色”]
}]
}
});
图表。默认值
包含图表
类型
特定部分，包括
比例
选项。您可以使用
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={
显示：假
};
Chart.defaults.bar.scales.xAxes[0].gridLines.drawOnChartArea=false；
Chart.defaults.bar.scales.yAxes[0]={
类型：'线性'，
网格线：{
drawOnChartArea:假
},
滴答声：{
贝吉纳泽罗：是的
}
};
新图表（document.getElementById（“myChart”）{
类型：'bar'，
数据：{
标签：[“A”、“B”、“C”、“D”]，
数据集：[{
数据：[25,18,8,13]，
背景颜色：[“红色”、“蓝色”、“绿色”、“橙色”]
}]
}
});

谢谢！但我不了解父属性的所有内容，例如如何使用线型图表的
drawOnChartArea=false
。@Rocsta：如果是
xAxes
，这将是
chart.defaults.line.scales.xAxes[0]。gridLines.drawOnChartArea=false
当我使用您的解决方案时，我遇到了以下错误：
jquery-3.4.1.min.js:2未捕获类型错误：无法设置未定义的属性“drawOnChartArea”
@Rocstar:我错了。由于
gridLines
尚未定义，它应该是
Chart.defaults.line.scales.xAxes[0]={type:“category”，id:“x-axis-0”，gridLines:{drawOnChartArea:false}
谢谢你，我更好地理解了这个概念谢谢！但我不了解父属性的所有内容，例如如何使用线型图表的
drawOnChartArea=false
。@Rocsta：如果是
xAxes
，这将是
chart.defaults.line.scales.xAxes[0]。gridLines.drawOnChartArea=false
当我使用您的解决方案时，我遇到了以下错误：
jquery-3.4.1.min.js:2未捕获类型错误：无法设置未定义的属性“drawOnChartArea”
@Rocstar:我错了。由于
gridLines
尚未定义，因此它应该是
Chart.defaults.line.scales.xAxes[0]={type:“category”，id:“x-axis-0”，gridLines:{drawOnChartArea:false}
谢谢，它可以工作，我对这个概念理解得更好