如何将 json 数组数据绑定到图表.js具有相同的画布 ID

Question

我的HTML画布如下所示：

<div>
    <canvas id="chartdiv" width="200" height="200"></canvas>
</div>

以下是 json 数据，

[{
    "SID": "1",
    "NAME": "niten",
    "FTEPERCENT": "71.29",
    "FTCPERCENT": "28.71"
}, {
    "SID": "2",
    "NAME": "jiten",
    "FTEPERCENT": "82.08",
    "FTCPERCENT": "17.92"
}]

下面是输入代码：

window.onload = function() {
    $.ajax({
        type: "POST",
        url: "ViewDirectManagersOverviewDetails.aspx/GetEmployeeOverviewDetailsForDirectManagers",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(Result) {
            debugger;
            Result = JSON.parse(Result.d);
            var newctx1;
            for (var i = 0; i < Result.length; i++) {
                var data1 = parseFloat(Result[i].FTEPERCENT);
                var data2 = parseFloat(Result[i].FTCPERCENT);
                var tempData = {
                    labels: ["FTE", "FTC"],
                    datasets: [{
                        data: [data1, data2],
                        backgroundColor: [
                            "#FF6384",
                            "#36A2EB"
                        ],
                        hoverBackgroundColor: [
                            "#FF6384",
                            "#36A2EB"
                        ],
                        borderWidth: 5
                    }]
                };
                // For a pie chart1
                var ctx = document.getElementById("chartdiv").getContext("2d");
                var myLineChart = new Chart(ctx, {
                    type: "pie",
                    data: tempData,
                    options: options,
                    title: {
                        display: true,
                        text: 'Employee Overview',
                        fontStyle: 'bold',
                        fontSize: 20
                    }
                });
            }
            $('chartdiv').append(newctx1);
        }
    });
};

上面的代码是在同一画布 id 上绘制饼图，但我想绘制到单独的饼图，因为 json 有两个数组对象，但画布 id 应该相同。

循环遍历 json 将提供两个单独的对象，因此我将不得不在表中绘制两个单独的饼图，就像我们在 datatable 中显示数据的方式一样，需要在表行中显示饼图。

Answer 1

遗憾的是，无法在单个画布中呈现多个图表。 图表.js绑定到整个画布对象，并使用整个画布呈现单个图表。

如果您想查看两个单独的饼图，则需要两个单独的画布元素。 但是，如果满足您的需求，您当然可以将多个数据集添加到单个图形中。 对于饼图，它将在较大的饼图中嵌入较小的饼图。

下面是一个示例配置，显示了如何在单个饼图中设置多个数据集。

var ctx = document.getElementById("chart-area").getContext("2d");
var myPie = new Chart(ctx, {
  type: 'pie',
  data: {
        labels: ["FTE", "FTC"],
    datasets: [{
      label: 'Dataset 1',
      data: data1,
      backgroundColor: [
        "#FF6384",
        "#36A2EB"
      ],
      hoverBackgroundColor: [
        "#FF6384",
        "#36A2EB"
      ],
      borderWidth: 5,
    }, {
      label: 'Dataset 2',
      data: data2,
      backgroundColor: [
        "#FF6384",
        "#36A2EB"
      ],
      hoverBackgroundColor: [
        "#FF6384",
        "#36A2EB"
      ],
      borderWidth: 5,
    }],
  },
  options: {
    title: {
      display: true,
      text: 'Employee Overview',
      fontStyle: 'bold',
      fontSize: 20
    }
  }
});

下面是一个代码笔示例来演示这一点。