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

Answer 2

我只是将这些行添加到头部并解决我的问题：

<link rel="stylesheet" href="ckeditor/plugins/chart/lib/chart.css">
<script src="ckeditor/plugins/chart/chart.min.js"></script>
<script src="ckeditor/plugins/chart/widget2chart.js"></script>

绘制由ckeditor插件创建的chart.js

2 个答案: