Chartjs 和动态数据数组

我正在尝试在图表中添加 1 到 5 个数据系列,但在一个数据系列之外遇到问题


所以我有创建基本图表的功能


var mychart

function dochart(id,colors,title,bartype="bar"){

mychart = new Chart(document.getElementById(id), {

    type: bartype,

    data: {

        labels: [],

        datasets: []

    },

    options: {

        legend: { display: false },

        title: {

            display: true,

            text: title

        },

    }

});

}

然后我创建数据集值的代码(这只是一个数据系列)


newDataset = {

    label: [<?=$labels?>],

    data: []

};

newDataset.data.push(<?=$data?>)

现在我的问题是让图表更新


mychart.data.datasets.push(newDataset);

mychart.update();

但这不起作用 - 图表大纲已完成,但没有别的,当我记录 mychart.data.datasets 中的内容时,我可以在那里看到数据


label: Array(9)

0: "<1"

1: "1-4"

2: "5-14"

3: "15-24"

4: "25-34"

5: "35-44"

6: "45-54"

7: "55-64"

8: "65+"

length: 9

__proto__: Array(0)

data: Array(9)

0: 0

1: 0

2: 0

3: 0

4: 1

5: 1

6: 1

7: 4

8: 57

我在这里想念什么?在某些图表上,我需要数据集中的多个数据系列


MM们
浏览 222回答 1
1回答

梵蒂冈之花

问题一:global范围:这是+-您的代码大纲(您每次运行函数并且只更改了原始的personvar new 对象指针->这就是您的代码仅创建一个“人”(或图表)的原因。var person;function hello(){&nbsp; person = new Object();&nbsp; person.firstName = 'testFirstName';&nbsp; person.lastName = 'testLastName';}hello();function hello2(){&nbsp; person = new Object();&nbsp; person.firstName = 'test_2_FirstName';&nbsp; person.lastName = 'test_2_LastName';}hello2();console.log(person.firstName); /*return test_2_FirstName */https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var问题二:多个数据集 = 数据集数组很难准确理解您的问题(请添加一个最小的可重现示例)。 https://stackoverflow.com/help/minimal-reproducible-example无论如何,这是hello world最基本的示例(在单击和隐藏按钮上添加一个数据集)。var data = {&nbsp; labels: ["Africa", "Asia", "Europe", "America"],&nbsp; datasets: [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; /* data */&nbsp; &nbsp; &nbsp; label: "Dataset1 (millions)",&nbsp; &nbsp; &nbsp; backgroundColor: ["#490A3D", "#BD1550","#E97F02", '#F8CA00'],&nbsp; &nbsp; &nbsp; data: [1000,1500,2000, 2200]&nbsp; &nbsp; }&nbsp; ]};var options = {&nbsp; scales: {&nbsp; &nbsp; xAxes: [{&nbsp; &nbsp; &nbsp; stacked: false&nbsp; &nbsp; }],&nbsp; &nbsp; yAxes: [{&nbsp; &nbsp; &nbsp; stacked: false&nbsp; &nbsp; }]&nbsp; }};var myChart = new Chart(document.getElementById("chart"), {&nbsp; type: 'bar',&nbsp; data: data,&nbsp; options: options});var add_this_dataset_on_click = {&nbsp; /* data */&nbsp; label: "Dataset2 (millions)",&nbsp; backgroundColor: ["purple", "magenta","orange", 'yellow'],&nbsp; data: [500,750,1000, 1100]}function addData() {&nbsp; myChart.data.datasets.push(add_this_dataset_on_click);&nbsp; myChart.update();&nbsp; document.getElementById("btn").style.display = "none";}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script><button id="btn" onclick="addData()">Add dataset</button><canvas id="chart"></canvas>她更复杂的例子:https ://www.chartjs.org/samples/latest/相关文档:https ://www.chartjs.org/docs/latest/developers/updates.html我的建议。从“hello world”示例开始(没有 PHP 和动态数据)。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript