Question

我的HTML Canvas如下所示：

<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有两个数组对象但是canvas id应该是相同的。

通过json循环将提供两个单独的对象，因此我将不得不在表格中绘制两个单独的饼图，我们在数据表中显示数据的方式同样需要在表格行中显示饼图。

Answer 1

不幸的是，无法在单个画布中渲染多个图表。 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
    }
  }
});

这是一个codepen example来证明这一点。

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

1 个答案: