Question

function method() {
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(75,192,192,0.4)",
                borderColor: "rgba(75,192,192,1)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [65, 59, 80, 81, 56, 55, 40],
                spanGaps: false,
            }
        ]
    },
    options: {
        responsive: false,
    }
});

我添加了一个在图表上添加新值的功能

function addvalue() {
myChart.data.labels.concat("August");
myChart.data.datasets[0].data.concat(55);
myChart.update();

但是编译器说我＆＃34; myChart没有声明＆＃34;在这种情况下如何绘制图表？我刚刚开始使用画布和这些图表

Answer 1

范围很重要，您也希望返回一些内容

function method() {
return new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(75,192,192,0.4)",
                borderColor: "rgba(75,192,192,1)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [65, 59, 80, 81, 56, 55, 40],
                spanGaps: false,
            }
        ]
    },
    options: {
        responsive: false,
    }
});

var myChart = method();

function addvalue(myChart) {
myChart.data.labels.concat("August");
myChart.data.datasets[0].data.concat(55);
myChart.update();
return myChart;
}

Answer 2

正如Mihai指出的那样，深入阅读MDN关于functions和scope的文档。

您的代码需要导出或使myChart变量可供其他函数访问。以下是快速而肮脏的修复 - 您需要确定最适合您应用的内容。

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(75,192,192,0.4)",
                borderColor: "rgba(75,192,192,1)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [65, 59, 80, 81, 56, 55, 40],
                spanGaps: false,
            }
        ]
    },
    options: {
        responsive: false,
    }
});

这是全局范围（不是最好的），但它允许您的其他功能访问它：

function addvalue() {
  // myChart is now globally accessible
  myChart.data.labels.concat("August");   
  myChart.data.datasets[0].data.concat(55);
  myChart.update();
}

在不了解更多背景的情况下，我无法专门说出更好的事情（比如require你的图表到其他代码中）

更新或插入新的价值图表

2 个答案: