Как нарисовать диаграмму с Chart.JS?

Я пытаюсь создать таблицу, используя библиотеку Chart.JS, но я получаю следующее сообщение об ошибке:Как нарисовать диаграмму с Chart.JS?

Uncaught ReferenceError: options is not defined

Я следовал за documentation, но, возможно, я что-то не хватает.

См. Здесь для моих codepen example.

<html> 
    <head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> 
    </head> 

    <body> 
    <canvas id="myChart" width="400" height="400"></canvas> 


    <script> 
     // Get the context of the canvas element we want to select 

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      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: [65, 59, 80, 81, 56, 55, 40] 
     }, 
     { 
      label: "My Second dataset", 
      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: [28, 48, 40, 19, 86, 27, 90] 
     } 
    ] 
}; 

var ctx = document.getElementById("myChart").getContext("2d"); 
var myNewChart = new Chart(ctx).PolarArea(data); 
new Chart(ctx).PolarArea(data, options); 
new Chart(ctx).PolarArea(data); 

    </script> 
    </body> 

</html>

источник

2015-09-21 Chris

Я изменил вашу структуру данных. С помощью этих новых «данных» код работает. Я думаю, что вы использовали определенную структуру данных для линейной диаграммы.

<html> 
    <head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> 
    </head> 

    <body> 
    <canvas id="myChart" width="400" height="400"></canvas> 


    <script> 
     // Get the context of the canvas element we want to select 

var data = [ 
    { 
     value: 300, 
     color:"#F7464A", 
     highlight: "#FF5A5E", 
     label: "Red" 
    }, 
    { 
     value: 50, 
     color: "#46BFBD", 
     highlight: "#5AD3D1", 
     label: "Green" 
    }, 
    { 
     value: 100, 
     color: "#FDB45C", 
     highlight: "#FFC870", 
     label: "Yellow" 
    }, 
    { 
     value: 40, 
     color: "#949FB1", 
     highlight: "#A8B3C5", 
     label: "Grey" 
    }, 
    { 
     value: 120, 
     color: "#4D5360", 
     highlight: "#616774", 
     label: "Dark Grey" 
    } 

]; 

var ctx = document.getElementById("myChart").getContext("2d"); 
var myNewChart = new Chart(ctx).PolarArea(data); 

    </script> 
    </body> 

</html>

источник

2015-09-21 13:09:55 Gonath

Извлечение данных из базы данных с помощью Chat.js Вот код, он работал на меня.

<link href="JSfiles/ui.jqgrid.css" rel="stylesheet" /> 
    <link href="JSfiles/jquery-ui-1.9.2.custom.css" rel="stylesheet" /> 
    <script src="JSfiles/jquery-1.7.1.min.js"></script> 
    <script src="JSfiles/grid.locale-en.js"></script> 
    <script src="JSfiles/jquery.jqGrid.min.js"></script> 
    <script src="JSfiles/jquery-ui-1.9.2.custom.js"></script> 
    <script type="text/javascript"> 

     $(function() { 
      var lastsel2; 
      debugger; 
      $("#dataGrid").jqGrid({ 
       url: 'offers.aspx/LoadGrid', 
       datatype: 'json', 
       mtype: 'POST', 
       height: 200, 
       width: 500, 
       //localReader: { CampaignID: 'CampaignID' }, 
       editurl: 'clientArray', 
       onSelectRow: function (date) { 
        if (txAmount && txAmount !== lastsel2) { 
         jQuery('#dataGrid').restoreRow(lastsel2); 
         jQuery('#dataGrid').editRow(date, true); 
         lastsel2 = date; 
        } 
       }, 
       serializeGridData: function (postData) { 
        //alert(postData); 
        return JSON.stringify(postData); 

       }, 

       ajaxGridOptions: { contentType: "application/json" }, 
       loadonce: true, 
       colNames: ['China', 'Indonesia', 'Cambodia', 'Malayasia', 'Thailand', 'Vietnam', 'Date', ], 
       colModel: [ 
           { name: 'CN', index: 'CN', width: 10, height: 30, editable: false, sortable: true }, 
           { name: 'ID', index: 'ID', width: 10, height: 30, editable: false, sortable: true }, 
           { name: 'KH', index: 'KH', width: 10, height: 30, editable: false, sortable: true }, 
           { name: 'MY', index: 'MY', width: 10, height: 30, editable: false, sortable: true }, 
           { name: 'TH', index: 'TH', width: 10, height: 30, editable: false, sortable: true }, 
           { name: 'VN', index: 'VN', width: 10, height: 30, editable: false, sortable: true }, 
           { name: 'date', index: 'date', width: 10, sortable: true, sorttype: "number", formatter: 'date', formatoptions: { srcformat: "Y-m-d", newformat: 'd/m/y', datefmt: 'd/m/y' } } 

       ], 
       pager: '#pagingGrid', 
       rowNum: 10, 
       rowList: [10, 20, 30], 
       viewrecords: true, 
       gridview: true, 
       jsonReader: { 
        page: function (obj) { return 1; }, 
        total: function (obj) { return 1; }, 
        records: function (obj) { return obj.d.length; }, 
        root: function (obj) { return obj.d; }, 
        repeatitems: false, 
        id: "date" 
       }, 
       sortname: 'date', 
       sortorder: "desc", 
       sortable: true, 
       loadComplete: function() { 
        var $self = $(this); 
        if ($self.jqGrid("getGridParam", "datatype") === "json") { 
         setTimeout(function() { 
          $self.trigger("reloadGrid"); // Call to fix client-side sorting 
         }, 50); 
        } 
       }, 
       caption: 'Incomming Offers Report ' 
      }); 
      jQuery("#dataGrid").jqGrid('navGrid', '#pagingGrid', 
       { search: true, edit: false, add: false, del: false, refresh: true }, {}, {}, {}, 
       { recreateFilter: true, overlay: true, multipleSearch: true, multipleGroup: true }); 

     }); 

    </script> 
C# file 
-------- 
[WebMethod] 
     public static List<object> Chartload() 
     { 

      DataTable dt = new DataTable(); 
      string StartDate = DateTime.Now.AddDays(-180).ToString("yyyy-MM-dd"); 
      string EndDate = DateTime.Now.ToString("yyyy-MM-dd"); 

      List<ChartDetails> dataList = new List<ChartDetails>(); 
      string country = string.Empty; 


      List<object> iData = new List<object>(); 



      Dataclass objoffers = new Dataclass(); 
      dt = objoffers.Getoffers("", StartDate, EndDate, ""); 

      string[] columnNames = dt.Columns.Cast<DataColumn>().Select(x => x.ColumnName).ToArray(); 

      foreach (string dc in columnNames) 
      { 

       List<string> labels = new List<string>(); 
       List<double> lst_dataItem_1 = new List<double>(); 


       for (int j = 0; j < dt.Rows.Count; j++) 
       { 
        if (dc == "date") 
        { 
         labels.Add(dt.Rows[j]["date"].ToString()); 
         //iData.Add(labels); 
        } 
        else 
        { 
         lst_dataItem_1.Add(Convert.ToDouble(dt.Rows[j][dc].ToString())); 
        } 


       } 
       if (dc == "date") 
        iData.Add(labels); 
       else 
        iData.Add(lst_dataItem_1); 
       //} 

      } 

      return iData; 

     }

источник

2016-04-29 06:58:40

Как нарисовать диаграмму с Chart.JS?

ответ

Смежные вопросы