Chart.js ajax 有多个数据集

Question

当折线图只有一条线时，我通过从 ajax 调用中检索数据集成功创建了折线图。我现在需要创建一个包含 2 条线的折线图，但我无法让它工作。

我的 ajax return 数据内置于 php。这是代码：

$returnData['line'] = array(
  'type' => 'line',
  'title' => 'Title',
  'labels' => array('Jan','Feb'),
  'datasets' => array(
    array(
      'data' => array(0,50),
      'borderColor' => "#f7464a",
      'label' => "Label 1",
      'fill' => false
    ),
    array(
      'data' => array(10,20),
      'borderColor' => "#8e5ea2",
      'label' => "Label 2",
      'fill' => true
    )
  )
);
echo json_encode($returnData);

我的jQueryajax电话是：

$.ajax({
    url: "https://example.com/chart_data",
    type: "POST",
    dataType: 'json',
    success: function(rtnData) {
        $.each(rtnData, function(dataType, data) {
            console.log(data.datasets);
            var ctx = document.getElementById("linechart").getContext("2d");
            var config = {
                type: data.type,
                data: {
                    datasets: [data.datasets],
                    labels: data.labels
                },
                options:  {
                    responsive: true,
                    title: {
                        display: true,
                        text: data.title
                    }
                }
            };
            window.myPie = new Chart(ctx, config);
        });
    },
    error: function(rtnData) {
        alert('error' + rtnData);
    }
});

当我查看控制台中记录的内容时，数据看起来不错，所以我不知道为什么这不起作用。我得到的只是图表，但没有线条。

我正在寻找一种面向未来的解决方案，只需修改 php 代码，我就可以根据需要向图表添加任意数量的行，而不必再更改 jQuery .

Answer 1

我发现了我的错误，以防其他人遇到这个问题....需要从 'datasets' 参数中删除方括号：

$.ajax({
    url: "https://example.com/chart_data",
    type: "POST",
    dataType: 'json',
    success: function(rtnData) {
        $.each(rtnData, function(dataType, data) {
                console.log(data.datasets);
            var ctx = document.getElementById("linechart").getContext("2d");
            var config = {
                type: data.type,
                data: {
                    datasets: data.datasets,
                    labels: data.labels
                },
                options:  {
                    responsive: true,
                    title: {
                        display: true,
                        text: data.title
                    }
                }
            };
            window.myPie = new Chart(ctx, config);
        });
    },
    error: function(rtnData) {
        alert('error' + rtnData);
    }
});

Chart.js ajax 有多个数据集

Chart.js ajax with multiple dataset

javascript

chart.js2