Chart.js - 多行圖表 - 僅顯示最後一個圖表

Question

我使用chart.js在一個頁面上顯示多個折線圖。但是，即使我已經調用了它們，只有最後一個圖表顯示了＃canvas1和＃canvas2。某個地方一定有衝突，我嘗試了大部分東西，但沒有任何快樂。這裏有兩個圖表，只顯示最後一個：

圖一

<script type="text/javascript"> 

    var lineChartData = { 
     labels : ["January","February","March","April","May","June","July","August","September","October","November","December"], 
     datasets : [ 
      { 
       label: "Target", 
       fillColor : "rgba(220,220,220,0.2)", 
       strokeColor : "rgba(220,220,220,1)", 
       pointColor : "rgba(220,220,220,1)", 
       pointStrokeColor : "#fff", 
       pointHighlightFill : "#fff", 
       pointHighlightStroke : "rgba(220,220,220,1)", 
       data : [160000,175000,185000,180000,185000,185000,185000,195000,200000,0,0] 
      }, 
      { 
       label: "Sales", 
       fillColor : "rgba(151,187,205,0.2)", 
       strokeColor : "rgba(151,187,205,1)", 
       pointColor : "rgba(151,187,205,1)", 
       pointStrokeColor : "#fff", 
       pointHighlightFill : "#fff", 
       pointHighlightStroke : "rgba(151,187,205,1)", 
       data : [<?php echo $stockJanuary ?>,<?php echo $stockFebruary ?>,<?php echo $stockMarch ?>,<?php echo $stockApril ?>,<?php echo $stockMay ?>,<?php echo $stockJune ?>,<?php echo $stockJuly ?>,<?php echo $stockAugust ?>,<?php echo $stockSeptember ?>,<?php echo $stockOctober ?>,<?php echo $stockNovember ?>,<?php echo $stockDecember ?>] 
      } 
     ] 

    } 
      window.onload = function(){ 
    var ctx = document.getElementById("canvas1").getContext("2d"); 
    window.myLine = new Chart(ctx).Line(lineChartData, { 
     responsive: true 
    }); 
} 
</script> 

圖二：

<script type="text/javascript"> 

    var lineChartData = { 
     labels : ["January","February","March","April","May","June","July","August","September","October","November","December"], 
     datasets : [ 
      { 
       label: "Target", 
       fillColor : "rgba(220,220,220,0.2)", 
       strokeColor : "rgba(220,220,220,1)", 
       pointColor : "rgba(220,220,220,1)", 
       pointStrokeColor : "#fff", 
       pointHighlightFill : "#fff", 
       pointHighlightStroke : "rgba(220,220,220,1)", 
       data : [19000,21000,23000,25000,27000,29000,31000,32000,33000,0,0] 
      }, 
      { 
       label: "Sales", 
       fillColor : "rgba(151,187,205,0.2)", 
       strokeColor : "rgba(151,187,205,1)", 
       pointColor : "rgba(151,187,205,1)", 
       pointStrokeColor : "#fff", 
       pointHighlightFill : "#fff", 
       pointHighlightStroke : "rgba(151,187,205,1)", 
       data : [<?php echo $northJanuary ?>,<?php echo $northFebruary ?>,<?php echo $northMarch ?>,<?php echo $northApril ?>,<?php echo $northMay ?>,<?php echo $northJune ?>,<?php echo $northJuly ?>,<?php echo $northAugust ?>,<?php echo $northSeptember ?>,<?php echo $northOctober ?>,<?php echo $northNovember ?>,<?php echo $northDecember ?>] 
      } 
     ] 

    } 

    window.onload = function(){ 
    var ctx = document.getElementById("canvas2").getContext("2d"); 
    window.myLine = new Chart(ctx).Line(lineChartData, { 
    responsive: true 
    }); 



} 

</script> 

你的幫助會非常讚賞，被竊聽我一會吧！

在此先感謝

Answer 1

嘗試對兩個ctx變量使用不同的名稱。

window.onload = function(){ 
    var ctx = document.getElementById("canvas2").getContext("2d"); 
    window.myLine = new Chart(ctx).Line(lineChartData, { 
     responsive: true 
    }); 


    var ctx2 = document.getElementById("canvas1").getContext("2d"); 
    window.myLine = new Chart(ctx2).Line(lineChartData2, { 
     responsive: true 
    }); 
} 

Answer 2

起初，我有完全相同的問題，因爲原來的問題，並試圖Arpan達斯建議，但並沒有在第一次嘗試改正。

任何人有同樣的問題，可能會發現有一個看多圖的這個工作示例在一個頁面上有用：

<div id="canvas-holder"> 
<canvas id="A" width="300" height="300"/><br> 
</div> 

<div id="canvas-holder"> 
<canvas id="B" width="300" height="300"/><br> 
</div> 

<script> 
    var pieDataA = [ { value: 50, color: "#F6BFBD" } ]; 
    var pieDataB = [ { value: 50, color: "#00BFBD" } ]; 
    window.onload = function(){ 
    var ctx1 = document.getElementById("A").getContext("2d"); 
    window.myPieA = new Chart(ctx1).Pie(pieDataA); 

    var ctx2 = document.getElementById("B").getContext("2d"); 
    window.myPieB = new Chart(ctx2).Pie(pieDataB); }; 
</script> 

Fiddle link: http://fiddle.jshell.net/2omjx9dn/

Answer 3

在最初的代碼中的錯誤是，你多次調用函數window.onload。

不幸的是，並不那麼簡單。當第二個onload事件處理程序被執行時，第一個onload事件處理程序將被替換。 [所以一個直到最後onload.window]

這個問題通常出現，當你想要分開創建圖形，例如，包括與PHP在你的頁面圖（因爲在每個PHP頁面你調用window.onload ）

簡單的解決方案：

function start() { 
    func1(); 
    func2(); 
} 
window.onload = start; 

西蒙·威利森建議：

function addLoadEvent(func) { 
    var oldonload = window.onload; 
    if (typeof window.onload != 'function') { 
    window.onload = func; 
    } else { 
    window.onload = function() { 
     if (oldonload) { 
     oldonload(); 
     } 
     func(); 
    } 
    } 
} 
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad); 
addLoadEvent(function() { 
    /* more code to run on page load */ 
}); 

Answer 4

多折線圖USI NG chart.js之

<script type="text/javascript"> 
      $(document).ready(function() { 
       debugger; 
       $.ajax({ 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        url: "CampComparison.aspx/getLineChartDataload", 
        data:{}, 
        async: true, 
        cache: false, 
        dataType: "json", 
        success: OnSuccess_, 
        error: OnErrorCall_ 
       }) 

       function OnSuccess_(reponse) { 

        var aData = reponse.d; 
        var aLabels = aData[0]; 
        var aDatasets1 = aData[1]; 
        var aDatasets2 = aData[2]; 
        var aDatasets3 = aData[3]; 
        var aDatasets4 = aData[4]; 
        var aDatasets5 = aData[5]; 

        var lineChartData = { 
         labels: aLabels, 
         datasets: [ 
          { 
           label: "Data1", 
           //fill:false, 
           fillColor: "rgba(0,0,0,0)", 
           strokeColor: "rgba(220,220,220,1)", 
           pointColor: "rgba(200,122,20,1)", 

           data: aDatasets1 
          }, 
          { 
           label: "Data2", 
           fillColor: 'rgba(0,0,0,0)', 
           strokeColor: 'rgba(220,180,0,1)', 
           pointColor: 'rgba(220,180,0,1)', 
           data: aDatasets2 
          }, 
          { 

           label: "Data5", 
           fillColor: "rgba(0,0,0,0)", 
           strokeColor: "rgba(151,187,205,1)", 
           pointColor: "rgba(152,188,204,1)", 
           data: aDatasets3 
          }, 

          { 
           label: "Data4", 
           fillColor: 'rgba(0,0,0,0)', 
           strokeColor: 'rgba(151,187,205,1)', 
           pointColor: 'rgba(151,187,205,1)', 
           data: aDatasets4 
          }, 
          { 
           label: "Data4", 
           fillColor: 'rgba(0,0,0,0)', 
           strokeColor: 'rgba(151,187,205,1)', 
           pointColor: 'rgba(151,187,205,1)', 

           data: aDatasets5 
          }, 


         ] 
        } 
        Chart.defaults.global.animationSteps = 50; 
        Chart.defaults.global.tooltipYPadding = 16; 
        Chart.defaults.global.tooltipCornerRadius = 0; 
        Chart.defaults.global.tooltipTitleFontStyle = "normal"; 
        Chart.defaults.global.tooltipFillColor = "rgba(0,160,0,0.8)"; 
        Chart.defaults.global.animationEasing = "easeOutBounce"; 
        Chart.defaults.global.responsive = true; 
        Chart.defaults.global.scaleLineColor = "black"; 
        Chart.defaults.global.scaleFontSize = 16; 
        //lineChart.destroy(); 
        //document.getElementById("canvas").innerHTML = '&nbsp;'; 
        //document.getElementById("chartContainer").innerHTML = '&nbsp;'; 
        //document.getElementById("chartContainer").innerHTML = '<canvas id="canvas" style="width: 650px; height: 350px;"></canvas>'; 
        //var ctx = document.getElementById("canvas").getContext("2d"); 
        //ctx.innerHTML = ""; 
        //var pieChartContent = document.getElementById('pieChartContent'); 
        //pieChartContent.innerHTML = '&nbsp;'; 
        //$('#pieChartContent').append('<canvas id="canvas" width="650px" height="350px"><canvas>'); 

        //ctx = $("#canvas").get(0).getContext("2d"); 
        var ctx = document.getElementById("canvas").getContext("2d"); 
        var lineChart = new Chart(ctx).Line(lineChartData, { 

         bezierCurve: true, 
         chartArea: { width: '62%' }, 
         responsive: true, 
         pointDotRadius: 10, 
         scaleShowVerticalLines: false, 
         scaleGridLineColor: 'black' 


        }); 
       } 
       function OnErrorCall_(repo) { 
        //alert(repo); 
       } 
      }); 

      //}); 

      </script> 
C#code 
-------- 
    [WebMethod(EnableSession = true)] 
     public static List<object> getLineChartDataload() 
     { 
      List<object> iData = new List<object>(); 
      List<string> labels = new List<string>(); 
      string advertiserid = HttpContext.Current.Session["AccountID"].ToString(); 
      if (!string.IsNullOrEmpty(advertiserid)) 
      { 
       // string StartDate = DateTime.Now.AddDays(-180).ToString("yyyy-MM-dd"); 
       string StartDate = DateTime.Now.AddDays(-60).ToString("yyyy-MM-dd"); 
       string EndDate = DateTime.Now.ToString("yyyy-MM-dd"); 
       string strcampaignid = string.Empty; 
       DataTable dt = new DataTable(); 
       int i = 0; 
       chatBL objcampid = new chatBL(); 
       string query = "select distinct top 3 Campaignid,CampaignName from campaign where advertiserid='" + advertiserid + "' order by CampaignName"; 
       dt = objcampid.commonFuntionGetData2(query); 
       foreach (DataRow drow in dt.Rows) 
       { 
        strcampaignid += drow["Campaignid"].ToString() + ","; 
       } 
       if (!string.IsNullOrEmpty(strcampaignid)) 
       { 
        strcampaignid = strcampaignid.Substring(0, strcampaignid.Length - 1); 
       } 
       string[] campaignid = strcampaignid.Split(','); 


       //First get distinct Month Name for select Year. 
       // string query1 = "select top 10 cast(createddatetime as date) as month_name from advertiser where CurrentBal>0 order by CurrentBal"; 
       //query1 += " "; 
       // query1 += " order by month_number;"; 
       foreach (string strcamp in campaignid) 
       { 

        if (i == 0) 
        { 
         chatBL objblabel = new chatBL(); 
         // DataTable dtLabels = objblabel.Topupmonthly("5E8EF1E9-67BF-489C-84CB-AFF0BB0FE707", "2015-09-18", "2016-02-25", "months"); 
         DataTable dtLabels = objblabel.Topupmonthly2(strcamp, StartDate, EndDate, "months"); 
         foreach (DataRow drow in dtLabels.Rows) 
         { 
          labels.Add(drow["InsDateTime"].ToString().Substring(2, 7)); 
         } 
         iData.Add(labels); 
        } 


        // string query_DataSet_1 = "select top 10 CurrentBal from advertiser where CurrentBal>0 order by CurrentBal"; 
        //query_DataSet_1 += " (orders_quantity) as total_quantity from mobile_sales "; 
        //query_DataSet_1 += " where YEAR(orders_date)='" + year + "' and mobile_id='" + mobileId_one + "' "; 
        //query_DataSet_1 += " group by month(orders_date) "; 
        //query_DataSet_1 += " order by month_number "; 


        chatBL objbl = new chatBL(); 
        DataTable dtDataItemsSets_1 = objbl.Topupmonthly2(strcamp, StartDate, EndDate, "months"); 
        List<double> lst_dataItem_1 = new List<double>(); 
        foreach (DataRow dr in dtDataItemsSets_1.Rows) 
        { 
         lst_dataItem_1.Add(Convert.ToDouble(dr["CPACOUNT"].ToString())); 
        } 
        iData.Add(lst_dataItem_1); 

        //string query_DataSet_2 = "select top 10 Totalspent from advertiser where CurrentBal>0 order by CurrentBal"; 
        //query_DataSet_2 += " (orders_quantity) as total_quantity from mobile_sales "; 
        //query_DataSet_2 += " where YEAR(orders_date)='" + year + "' and mobile_id='" + mobileId_two + "' "; 
        //query_DataSet_2 += " group by month(orders_date) "; 
        //query_DataSet_2 += " order by month_number "; 

        //chatBL objbl1 = new chatBL(); 
        //DataTable dtDataItemsSets_2 = objbl1.Topupmonthly("5E8EF1E9-67BF-489C-84CB-AFF0BB0FE707", "2015-09-18", "2016-02-25", "months"); 
        //List<double> lst_dataItem_2 = new List<double>(); 
        //foreach (DataRow dr in dtDataItemsSets_2.Rows) 
        //{ 
        // lst_dataItem_2.Add(Convert.ToDouble(dr["CPACOUNT"].ToString())); 
        //} 
        //iData.Add(lst_dataItem_2); 
        i = i + 1; 
       } 
      } 
      return iData; 
     }   

Answer 5

我有同樣的問題，雖然這是一個小的缺乏從我關注它，我花了一段時間來弄明白：我使用的所有圖表相同的數據參考有小的變化。

這裏的問題及解決方法：

chartData = { 
     labels: Array(dataLeft.length).fill(""), // No labels on X axis 
     datasets: [ 
      { 
       label      : "Lado Esquerdo", 
       backgroundColor   : "rgba(50,192,50,0.4)", 
       borderColor    : "rgba(75,192,75,1)", 
       pointBorderColor   : "rgba(75,192,75,1)", 
       data      : dataLeft, 
      }, 
      { 
       label      : "Lado Direito", 
       backgroundColor   : "rgba(192,50,50,0.4)", 
       borderColor    : "rgba(192,75,75,1)", 
       pointBorderColor   : "rgba(192,75,75,1)", 
       data      : dataRight, 
      } 
     ] 
    }; 

我就是用這個chartData所有圖表，但構建一個新的圖表前，我改變了數據屬性（chartData.datasets[0].data = some_specific_value_for_each_chart）

但由於這是一個參考，我改變了以前構建的所有圖表的數據，將它們的數據設置爲最後一個初始化圖表的相同數據！

---

我不知道如果我把最好的方法，但初始化圖表

createChartData = function(dataRight, dataLeft) { 
    return { 
      labels: Array(dataLeft.length).fill(""), // No labels on X axis 
      datasets: [ 
       { 
        label      : "Lado Esquerdo", 
        backgroundColor   : "rgba(50,192,50,0.4)", 
        borderColor    : "rgba(75,192,75,1)", 
        pointBorderColor   : "rgba(75,192,75,1)", 
        data      : dataLeft, 
       }, 
       { 
        label      : "Lado Direito", 
        backgroundColor   : "rgba(192,50,50,0.4)", 
        borderColor    : "rgba(192,75,75,1)", 
        pointBorderColor   : "rgba(192,75,75,1)", 
        data      : dataRight, 
       } 
      ] 
     } 
}; 

然後當給init圖表來解決這個我動態返回的數據：

var chart1 = new Chart(ctx1, { 
      type: 'line', 
      data: createChartData(graphData1, graphData2), 
      options: chartOptions 
     });