javascript - 绘制ckeditor插件创建的chart.js

Question

我使用ckeditor并使用chartjs插件创建图表:

<div class="chartjs" data-chart="doughnut" data-chart-height="300"
data-chart-value="[{"value":70,"label":"A"},{"value":50,"label":"B"}]"></div>

但是我不知道如何在加载 html 页面时绘制图表。

Answer 1

您可以使用canvas作为图表容器

<canvas id="chartjs" width='300' height='300'></canvas>

然后运行此 JavaScript，按如下方式传递参数:

var ctx = document.getElementById("chartjs");

var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["A", "B"],
        datasets: [{
            data: [70, 50],
            backgroundColor: ['red', 'pink']
        }]
    },
});

See working example here