JSON响应中的条形图 [英] Bar graph from JSON response

问题描述

我有一个Ajax调用，它获取一些数据列表，如下所示.

I have an Ajax call that get some list of data like below.

[{"fiscal_year": "2014", "fiscal_week": "W28", "sales": "155347721.76"}, {"fiscal_year": "2014", "fiscal_week": "W28", "sales": "155347721.76"}, {"fiscal_year": "2014", "fiscal_week": "W29", "sales": "152642118.72"}, {"fiscal_year": "2014", "fiscal_week": "W30", "sales": "143687644.80"}, {"fiscal_year": "2014", "fiscal_week": "W31", "sales": "137338356.96"}, {"fiscal_year": "2014", "fiscal_week": "W32", "sales": "122727175.20"}, {"fiscal_year": "2014", "fiscal_week": "W33", "sales": "127129784.88"}, {"fiscal_year": "2014", "fiscal_week": "W34", "sales": "141020740.56"}, {"fiscal_year": "2015", "fiscal_week": "W28", "sales": "129989653.20"}, {"fiscal_year": "2015", "fiscal_week": "W29", "sales": "117462039.90"}, {"fiscal_year": "2015", "fiscal_week": "W30", "sales": "104150499.90"}, {"fiscal_year": "2015", "fiscal_week": "W31", "sales": "100001437.80"}, {"fiscal_year": "2015", "fiscal_week": "W32", "sales": "100007812.20"}, {"fiscal_year": "2015", "fiscal_week": "W33", "sales": "97044039.90"}, {"fiscal_year": "2015", "fiscal_week": "W34", "sales": "103385198.40"}];

还有演示代码，可帮助将数据显示为图形.

And also code of demo that helps to showing the data into graphs.

var userId = $('.user_id').val();
                                $.ajax({
                                    url : '<?php echo site_url('document/getChartData'); ?>',
                                    type : 'get',
                                    data: {userid: userId},
                                    dataType: 'json',
                                    success: function(data){

                                            var lineChartData = {
                                                    labels: ["w28", "w29", "w30", "w31", "w32", "w33", "w34"],
                                                    datasets: [
                                                        {
                                                            label: "My First dataset",
                                                            fillColor: "rgba(38, 185, 154, 0.21)", //rgba(220,220,220,0.2)
                                                            strokeColor: "rgba(38, 185, 154, 0.7)", //rgba(220,220,220,1)
                                                            pointColor: "rgba(38, 185, 154, 0.7)", //rgba(220,220,220,1)
                                                            pointStrokeColor: "#fff",
                                                            pointHighlightFill: "#fff",
                                                            pointHighlightStroke: "rgba(220,220,220,1)",
                                                            data: [29912892, 19912892, 15912892, 30912892, 1112892, 23912892, 23912892]
                                                        },
                                                        {
                                                            label: "My Second dataset",
                                                            fillColor: "rgba(3, 88, 106, 0.2)", //rgba(151,187,205,0.2)
                                                            strokeColor: "rgba(3, 88, 106, 0.70)", //rgba(151,187,205,1)
                                                            pointColor: "rgba(3, 88, 106, 0.70)", //rgba(151,187,205,1)
                                                            pointStrokeColor: "#fff",
                                                            pointHighlightFill: "#fff",
                                                            pointHighlightStroke: "rgba(151,187,205,1)",
                                                            data: [155347721, 152642118, 143687644, 137338356, 122727175, 127129784, 141020740]
                                                        }
                                                    ]

                                            }


                                             new Chart(document.getElementById("lineChart").getContext("2d")).Line(lineChartData, {
                                                responsive: true,
                                                tooltipFillColor: "rgba(51, 51, 51, 0.55)"
                                            });

                                    }
                                });

在使用Jquery将其绘制为条形图时需要帮助.

Need help in plotting this as bar chart using Jquery.

提前谢谢！

推荐答案

您可以尝试

Ajax呼叫

  $(function () {
       $.ajax({
              url: '<?php echo site_url('document/getChartData'); ?>',
              type: 'GET',
              datatype: "html",
              success: function (data) {
              lineChart(data);  // call the line chart function and pass the ajax data.
                },
                error: function (e) {
                console.log(e.message);
                }
              });
           });

折线图功能

 function lineChart(data){
          var salesChartCanvas = $("#lineChart").get(0).getContext("2d");
          var salesChartData = {
            labels: [],
            datasets: [
               {
                 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: []
               }
             ]
          };

         var salesChartOptions = {
              scaleShowGridLines : true,
              scaleGridLineColor : "rgba(0,0,0,.05)",
              scaleGridLineWidth : 1,
              scaleShowHorizontalLines: true,
              scaleShowVerticalLines: true,
              bezierCurve : true,
              bezierCurveTension : 0.4,
              pointDot : true,
              pointDotRadius : 4,
              pointDotStrokeWidth : 1,
              pointHitDetectionRadius : 20,
              datasetStroke : true,
              datasetStrokeWidth : 2,
              datasetFill : true,
              legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
             };

            var salesChart = new Chart(salesChartCanvas).Line(salesChartData,salesChartOptions);
            for(var i=0; i<data.length; i++){
                salesChart.addData([data[i].fiscal_week], data[i].sales);
            }
 }

尝试一下效果很好

这篇关于JSON响应中的条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！