utworzyć wykres liniowy wielofunkcyjnego przy użyciu Chart.js

Question

Próbuję utworzyć multilinii wykres używając Chart.js

mogę zrobić dla 1 linii i mogę zrobić 2 linie stosując ustaloną strukturę danych, ale nie mogę dostać wiele linii do wyświetlania danych przekazywanych do struktury danych.

tutaj przykładem jest wykorzystanie w skrócie od chart.js stronie

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

teraz mój kod,

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

wykres zawsze wyświetla Te same generowana linia 4 razy.

Jestem nowy w JavaScript i jestem pewien, że robię coś złego w tworzeniu struktury obiektu, spędziłem dzień stara się wypracować to

jest chart.js możliwość dodania wartości następująco powinienem być przy użyciu tej

.addData (valuesArray, etykietę)

Answer 1

podczas tworzenia wkładając ten sam obiekt (zestawu danych) na wszystkich 4 miejsc po zbiorze. Więc wszelkie manipulacje w pętli są wykonywane na wszystkich elementach tablicy (faktycznie byłoby bardziej dokładne, aby powiedzieć, że to się robi na zbiorze i że zestaw danych jest tam na wszystkich 4 indeksów tablicy)

zauważyć, że w Poniższy kod literał obiektu {} jest w rzeczywistości wstawiany 4 razy do tablicy, co daje za każdym razem nowy element.

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, 
// }); 

Wprowadziłem również niewielką zmianę dla twoich etykiet - potrzebujesz tylko 1 zestawu etykiet.

Aby narysować analogię, oryginalny kod robi to

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

Pod koniec tego można w zasadzie mieć tablicę z 4 wskaźników do samo obiektu a.

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

Answer 2

Odzyskiwanie danych z wykresów bazie Multiple-Line In chart.js wykorzystaniem ASP.NET, C# Oto kod

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