Chartjs 和动态数据数组

Question

我正在尝试在图表中添加 1 到 5 个数据系列，但在一个数据系列之外遇到问题所以我有创建基本图表的功能var mychartfunction 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: 01: 02: 03: 04: 15: 16: 17: 48: 57我在这里想念什么？在某些图表上，我需要数据集中的多个数据系列

Answer 1

问题一：global范围：

这是+-您的代码大纲（您每次运行函数并且只更改了原始的personvar new 对象指针->这就是您的代码仅创建一个“人”（或图表）的原因。

var person;

function hello(){

  person = new Object();

  person.firstName = 'testFirstName';

  person.lastName = 'testLastName';

}

hello();

function hello2(){

  person = new Object();

  person.firstName = 'test_2_FirstName';

  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 = {

  labels: ["Africa", "Asia", "Europe", "America"],

  datasets: [

    {

      /* data */

      label: "Dataset1 (millions)",

      backgroundColor: ["#490A3D", "#BD1550","#E97F02", '#F8CA00'],

      data: [1000,1500,2000, 2200]

    }

  ]

};

var options = {

  scales: {

    xAxes: [{

      stacked: false

    }],

    yAxes: [{

      stacked: false

    }]

  }

};

var myChart = new Chart(document.getElementById("chart"), {

  type: 'bar',

  data: data,

  options: options

});

var add_this_dataset_on_click = {

  /* data */

  label: "Dataset2 (millions)",

  backgroundColor: ["purple", "magenta","orange", 'yellow'],

  data: [500,750,1000, 1100]

}

function addData() {

  myChart.data.datasets.push(add_this_dataset_on_click);

  myChart.update();

  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 和动态数据）。