在同一 html 页面中使用不同数据重复 charts/graphics

Question

这是在网页上显示图表的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" 但没有...

Answer 1

我快速 fiddle 并假设您使用的是 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

在同一 html 页面中使用不同数据重复 charts/graphics

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

html

javascript

graphics

charts

html5-canvas