Javascript 如何将json数组数据绑定到具有相同画布id的chart.js？

我的HTML画布如下所示：

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

下面是输入代码：

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);
        }
    });
};

window.onload=function（）{
$.ajax({
类型：“POST”，
url:“ViewDirectManagerOverviewDetails.aspx/GetEmployeeOverviewDetails ForDirectManager”，
数据：“{}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（结果）{
调试器；
Result=JSON.parse（Result.d）；
var-newctx1；
对于（变量i=0；i

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

---

通过json循环将产生两个单独的对象，因此我必须在表中绘制两个单独的饼图，我们在datatable中显示数据的方式同样需要在表行中显示饼图。

不幸的是，无法在一个画布中呈现多个图表。Chart.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
    }
  }
});

---

这里有一个例子来说明这一点。

有没有其他的饼图是开放式和免费的，我们可以用它来实现这一点？不是一个在画布上呈现多个饼图的饼图。你为什么需要这个？为什么不让两个图表使用两个不同的画布元素呢？基本上，我得到的datatable包含多行SID及其相关数据。我使用html表来呈现这些数据，这些数据在同一个表中多次通过行和不同sid的显示图表进行迭代。希望你能理解！！！为什么不在每个表行（在

中）中放置一个不同的

元素（具有唯一的

id

）？我正在生成不同的画布元素id，如“var series=new Array（_tempCanvas.push（$（“”，{id:I，width:1，height:1}”）；”，但如何放置每个表行列是我的难点。你能帮我写那个逻辑吗。

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
    }
  }
});