代码之家 › 专栏 › 技术社区 › Yanayaya

图表JS全局选项

chart.js global-variables variables javascript

Yanayaya · 技术社区 · 9 年前

我似乎在Chart中出错了。JS出于某种原因。它与您可以设置的全局选项有关。

如下所示这是我的代码

var chart1 = document.getElementById("chart1").getContext("2d"),
chart2 = document.getElementById("chart2").getContext("2d"),
chart3 = document.getElementById("chart3").getContext("2d"),

datatest1 = document.getElementById("datatest1").value,
datatest2 = document.getElementById("datatest2").value,

color_bg = "#00b5e4",
color_fg = "#007799",

data1 = [{ value: Math.floor(Math.random() * 100), color: color_bg}, { value: Math.floor(Math.random() * 100), color: color_fg}],
data2 = [{ value: datatest1, color: color_bg}, { value: datatest2, color: color_fg}],
data3 = {
    labels: ["Jan", "Feb", "Mar"],
    datasets: [
        {
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};


//
// #Global Chart Settings
var options = Chart.defaults.global = {
animation: true,
animationSteps: 160,
animationEasing: "easeOutQuart",
responsive: true,
showTooltips: true,
segmentShowStroke: false,
maintainAspectRatio: true,
percentageInnerCutout: 70,
onAnimationComplete: function () {
    "use strict";
    //console.log("Animation Done");
}
};

$(document).ready(function () {
"use strict";

//
// #Initialise and bind to data and global options
new Chart(chart1).Doughnut(data1, options);
new Chart(chart2).Doughnut(data2, options);
new Chart(chart3).Radar(data3);       
});

如果从图表中删除选项,如果添加选项并根据其文档进行全局设置,则会出现我提到的错误。我是错过了什么明显的东西还是这里有问题?

3 回复 | 直到 9 年前

potatopeelings 9 年前

当你这样做的时候

var options = Chart.defaults.global = {
   ...

您正在为对象设置“完整图表”全局默认值。除非对象中有所有图表全局选项,否则这将导致许多选项最终为 undefined 。设置全局选项的正确方法如下

Chart.defaults.global.animation = true;
Chart.defaults.global.animationSteps = 160;
...

i、 e.更改中各个属性的值 global 而不是设置整个 全球的 所有物

allu 9 年前

图表的全局选项可以这样设置:

Chart.defaults.global = {
//Set options

所以您可以删除

var = options

这将为所有未来图表设置默认值

有关进一步说明,请参阅文档: http://www.chartjs.org/docs/

如果要为每个图表指定选项,请执行以下操作:

new Chart(ctx).Line(data, {
    // options here
});

munnahbaba 8 年前

首先必须理解,为了处理动画,需要调整的主要属性是“Chart.defaults.global.animation”。

然后,将此作为基础,您将需要调整上述和文档页面中提到的子属性。

因此,您可以更改如下:

Chart.defaults.global.animation.animationSteps=160;
Chart.defaults.global.animation.duration=5000;
...

对于 这些代码行的定位, 遵循 第一个答案是土豆皮 .

我尝试过用这种方式改变,而且效果很好!!!