Question

由于某种原因，我似乎在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);       
});

如果您从他们工作的图表中删除选项，如果您添加选项并根据其文档全局设置它们，您会收到我提到的错误。我错过了一些明显的东西，或者这里有问题吗？

Answer 1

当你这样做时

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

您正在将COMPLETE Chart全局默认设置为您的对象。除非您的对象中包含所有图表全局选项，否则这将导致许多选项最终为undefined。设置全局选项的正确方法就是这样

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

即。更改global中各个属性的值，而不是设置整个global属性。

Answer 2

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

Chart.defaults.global = {
//Set options

所以你可以删除

var = options

这将为您以后的所有图表设置默认值

请参阅文档以获取进一步说明：http://www.chartjs.org/docs/

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

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

Answer 3

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

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

所以，你可以改变如下：

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

对于这些代码行的定位，按照 potatopeelings的第一个答案进行。

我试过用这种方式改变它的工作原理!!!

Answer 4

var config = { 类型：“行”，数据：{ 标签：标签，数据集：format_data }，选项：{ 标题：{ 显示：true，文字：“ Chart.js时标” } } };

var ctx = document.getElementById（“ canvas”）。getContext（“ 2d”）; 新图表（ctx，config）;

Chart.JS全球期权

4 个答案: