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

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

1 个答案: