如何在同一个HTML文件中使用两个不同版本的chart.js。我想在一个文件中有两个来自chart.js的不同图形,但它们似乎重叠在彼此的顶部。我如何将它们分开呢?我试过使用div标签将它们放在页面的不同部分。
chart.js
div
1rhkuytd1#
如果您对两个画布使用了相同的“id”,则可能会发生这种情况。您可以尝试以下操作:
<h1> Chart 1 </h1> <div> <canvas id="chart1"></canvas> </div> <h1> Chart 2 </h1> <div> <canvas id="chart2"></canvas> </div>
图表的代码-注意第一个图表使用“chart 1”,第二个图表使用“chart 2”。如果两个图表都使用“chart 1”,则第二个图表将绘制在同一画布中第一个图表的顶部。
new Chart(document.getElementById('chart1'), { type: 'line', options: { responsive: true, }, data: { label: [2000, 2001, 2002, 2003, 2004], datasets: [{ label: 'First Dataset1', data: [61, 44, 35, 33, 29] }] } }); new Chart(document.getElementById('chart2'), { type: 'bar', options: { responsive: true, }, data: { labels: [2006, 2007, 2008, 2009, 2010], datasets: [{ label: 'Second Dataset', data: [19, 17, 16, 13, 9] }] } });
链接到工作示例:https://jsfiddle.net/hdahle/vtnc49pq/
1条答案
按热度按时间1rhkuytd1#
如果您对两个画布使用了相同的“id”,则可能会发生这种情况。您可以尝试以下操作:
图表的代码-注意第一个图表使用“chart 1”,第二个图表使用“chart 2”。如果两个图表都使用“chart 1”,则第二个图表将绘制在同一画布中第一个图表的顶部。
链接到工作示例:https://jsfiddle.net/hdahle/vtnc49pq/