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

I have a website and some charts built with chart js. The data for the charts is all in one file, births.js. Before, there were multiple pages, so to load the correct chart I used a function and if statement for each page

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

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

etc.

等等

I've now been tasked with having everything on one interactive page, so the indexOf will always just be index. Is there a way to rewrite the function so that I can load the different data on the same page?

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

1 个解决方案

#1

well, then you can use different ids for different charts.not even this every jquery or js plugin can be used like this.

好吧，那么你可以为不同的图表使用不同的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

same again with another id for different charts

与另一个不同图表的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

#1