erstellen ein Diagramm mit mehreren Leitungen mit Chart.js

Question

Ich versuche, ein mehrzeiliges Diagramm

mit Chart.js erstellen

Ich kann dies für 1 Zeile tun, und ich kann zwei Linien haben eine feste Datenstruktur verwenden, aber ich kann nicht mehrere Zeilen, um Daten anzuzeigen, die an die Datenstruktur übergeben wurden. mein Code

abgekürzt

http://www.chartjs.org/docs/#getting-started

var myLineChart = new Chart(ctx).Line(data); 
    var data = { 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
     datasets: [ 
      {fillColor: "rgba(220,220,220,0.2)", 
      strokeColor: "rgba(220,220,220,1)", 
      data: [65, 59, 80, 81, 56, 55, 40] 
      }, 
      {fillColor: "rgba(151,187,205,0.2)", 
      strokeColor: "rgba(151,187,205,1)", 
      data: [28, 48, 40, 19, 86, 27, 90] 
      } 
     ]}; 

jetzt

hier ist das Beispiel für die Verwendung von chart.js Website

lineChartData = {};    //declare an object 
    lineChartData.labels = []; //add 'labels' element to object (X axis) 
    lineChartData.datasets = []; //add 'datasets' array element to object 

     dataset = {};  //a single dataset is an object 
      dataset.fillColor = "rgba(0,0,0,0)";  
      dataset.strokeColor = "rgba(200,200,200,1)"; 
      dataset.data = []; //contains the 'Y; axis data 

for (line = 0; line < 4; line++) { 
     y = []; 
     lineChartData.datasets.push(dataset); //create a new line dataset 

    for (x = 0; x < 10; x++) { 
     y.push(line + x); //push some data aka generate 4 distinct separate lines 
     lineChartData.labels += x; //adds x axis labels 
    } //for x 

     lineChartData.datasets[line].data = y; //send new line data to dataset 
} //for line 

     ctx = document.getElementById("Chart1").getContext("2d"); 
     myLineChart = new Chart(ctx).Line(lineChartData); 
    } 

das Diagramm zeigt immer die gleiche letzte erzeugte Linie 4 mal.

Ich bin neu in Javascript, und ich bin sicher, dass ich etwas falsch mit der Objektstruktur Schöpfung tue, ich habe einen Tag damit verbracht, diese

zur Arbeit

gibt es eine chart.js Optionswert wie folgt hinzufügen sollte ich

dieses

.addData (Arraywerte, Label)

Answer 1

Sie kreierten das gleiche Objekt einfügen (Datensatz) an allen vier Standorten des Datensatzes werden. Also alle Manipulationen in der Schleife werden auf alle Array-Elemente durchgeführt (eigentlich wäre es genauer zu sagen, dass es auf Datensatz gemacht wird und dieser Datensatz ist dort alle 4 Indizes des Arrays)

Beachten Sie, dass in Mit dem folgenden Code wird das {} Objektliteral tatsächlich 4 Mal in das Array eingefügt, wodurch Sie jedes Mal ein neues Element erhalten.

lineChartData = {}; //declare an object 
lineChartData.labels = []; //add 'labels' element to object (X axis) 
lineChartData.datasets = []; //add 'datasets' array element to object 

for (line = 0; line < 4; line++) { 
    y = []; 
    lineChartData.datasets.push({}); //create a new line dataset 
    dataset = lineChartData.datasets[line] 
    dataset.fillColor = "rgba(0,0,0,0)"; 
    dataset.strokeColor = "rgba(200,200,200,1)"; 
    dataset.data = []; //contains the 'Y; axis data 

    for (x = 0; x < 10; x++) { 
     y.push(line + x); //push some data aka generate 4 distinct separate lines 
     if (line === 0) 
      lineChartData.labels.push(x); //adds x axis labels 
    } //for x 

    lineChartData.datasets[line].data = y; //send new line data to dataset 
} //for line 

ctx = document.getElementById("Chart1").getContext("2d"); 
myLineChart = new Chart(ctx).Line(lineChartData); 

// for chart.js 2.0 the following will be to create `myLineChart` 
// myLineChart = new Chart(ctx1, { 
//  type: 'line', 
//  data: lineChartData, 
// }); 

Ich habe auch eine kleine Änderung für Ihre Etiketten - Sie brauchen nur 1 Satz von Etiketten.

Um eine Analogie zu ziehen, wurde der ursprüngliche Code diesen

Series a = new Series() 
Array chartData = [] 
for (var i = 0; i < 4; i++) { 
    chartData.add(a); 
    -- some modifications on a --- 
} 

haben Sie grundsätzlich mit 4 Zeigern auf das gleichen Objekt a einen Array Am Ende, dies zu tun.

Fiddle - http://jsfiddle.net/2Ld6d5op/

Answer 2

Daten aus der Datenbank abrufen Multiple-Liniendiagramme in chart.js asp.net verwenden, C# Hier ist der Code

<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; 
     }