在同一html页面中使用不同数据复制图表/图形

Duplicate charts/graphics with different data in the same html page

本文关键字：复制 数据 图形 html      更新时间：2023-09-26

这是在网页上显示图表的HTML：

<div class="chart" id="p1">
<canvas id="c1" width="560" height="260" style="width: 560px; height: 260px;"></canvas>
</div>

这就是生成图表的：

<script>
    var c1 = document.getElementById('c1');
    var parent = document.getElementById('p1');
    c1.width = parent.offsetWidth - 40;
    c1.height = parent.offsetHeight - 40;
    var data1 = {
        labels: [
            'Seg',
            'Ter',
            'Qua',
            'Qui',
            'Sex',
            'Sab',
            'Dom'
        ],
        datasets: [{
                fillColor: 'rgba(255,255,255,.1)',
                strokeColor: 'rgba(255,255,255,1)',
                pointColor: '#123',
                pointStrokeColor: 'rgba(255,255,255,1)',
                data: [
                    190,
                    200,
                    235,
                    390,
                    290,
                    250,
                    250
                ]
            }]
    };
    var options1 = {
        scaleFontColor: 'rgba(255,255,255,1)',
        scaleLineColor: 'rgba(255,255,255,1)',
        scaleGridLineColor: 'transparent',
        bezierCurve: false,
        scaleOverride: true,
        scaleSteps: 10,
        scaleStepWidth: 100,
        scaleStartValue: 0
    };
    new Chart(c1.getContext('2d')).Line(data1, options1);
        //@ sourceURL=pen.js
</script>

我想在同一个网站页面上制作其他具有不同值的图表。。。我已经尝试过重复代码并更改id="c1"e id="p1"，但什么都没有。。。

我做了一个快速小提琴，假设你使用的是chart.js

我添加了一个变量data2:

var data2 = {
        labels: [
            'A',
            'B',
            'C',
            'D'
            ...

和下面的html来保持第二张图表：

<div class="chart" id="p1">
  <canvas id="c2" width="560" height="260" style="width: 560px; height: 260px;"></canvas>
</div>

下面是一个例子。

Fiddle

相关文章：