如何在同一页面上加载具有不同数据的多个 Chartjs 图表？

Question

我有一个网站和一些用图表 js 构建的图表。 图表的数据都在一个文件births.js 中。 以前，有多个页面，所以为了加载正确的图表，我为每个页面使用了一个函数和 if 语句

    function drawChart() {
       if (window.location.href.indexOf("scotland") > -1) {
    } 
    else if(window.location.href.indexOf("index") > -1){
    }

等等。

我现在的任务是将所有内容都放在一个交互式页面上，因此 indexOf 将始终只是index 。 有没有办法重写函数，以便我可以在同一页面上加载不同的数据？

Answer 1

好吧，那么你可以为不同的图表使用不同的 id。甚至不是每个 jquery 或 js 插件都可以这样使用。

  <canvas id="yourid1" width="400" height="400"></canvas><canvas id="yourid2" width="400" height="400"></canvas>
var ctx = document.getElementById("yourid2");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels:......///and so on for your another charts
    var ctx = document.getElementById("yourid1");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels:.......///not the complete code. just reference

与不同图表的另一个 id 相同

<canvas id="yourid2" width="400" height="400"></canvas>
var ctx = document.getElementById("yourid2");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels:......///and so on for your another charts