javascript - 无法更改 Chart.js 中的默认值

Question

我正在使用以下代码

window.onload = function(){
    Chart.defaults.global.tooltipFillColor = "rgba(255,0,0,0.8)";
    Chart.defaults.global = { 
    tooltipFillColor: "rgba(255,0,0,0.8)",
    tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
    tooltipFontSize: 24,
    tooltipFontStyle: "bold",
    tooltipFontColor: "green",
    }
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
        responsive : true
    });
}

我无法一次更改多个值。当我编写上面的代码时，图表完全消失。

Answer 1

您需要在创建图表之前设置默认值。

window.onload = function(){
    Chart.defaults.global.tooltipFillColor = "rgba(255,0,0,0.8)";
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
        responsive : true
    });
};

如果您想一次更改多个选项，则必须遵循与更改一个选项相同的模式。以下代码重新定义 Chart.defaults.global。 (即 Chart.defaults.global 将只有 tooltipFillColor 属性。所有其他属性都将被销毁)。

Chart.defaults.global = {
  tooltipFillColor: "rgba(255,0,0,0.8)"
};

相反，您想要重新定义每个单独的属性:

Chart.defaults.global.tooltipFillColor ="rgba(255,0,0,0.8)";
Chart.defaults.globaltooltipFontFamily ="'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
Chart.defaults.globaltooltipFontSize =24;
Chart.defaults.globaltooltipFontStyle ="bold";
Chart.defaults.globaltooltipFontColor = "green";