无法在高图中显示json细分数据

时间:2019-01-11 05:58:33

标签: angularjs highcharts

我的json数据无法显示在高图中。我尝试了不同的json格式,但没有一个无法正常工作。谢谢

当我在控制器中对数据进行硬编码时,代码便可以正常工作。

  

kasjnc; jnDXKLVBhksbvknxc; k bwirfs; bdjkcb hksb; kjfndkvbw   ahibsfkdkvbskcdvkkhbdfshkbvkz; vnxc; v   sn; kzvksknfdkbvskjvkcdvkjsfkjdbvskefdkvksdvkjskfdjkbksndjkvcnkwjnesffgjfdjkbhsrbgdfkbkbsvkfbdkj

   var getmydata = function() { 
                    var catalogObj = {
            "path": '/addons/spsdal/widgets/spsdal-workflow-console/workflow- 
       graph-json-schema/graph3.json',
            "cache": false
                };
                return $http.get(catalogObj.path, {
                    cache: false
                }).success(function(data, status, headers, config) {
                    logger.info("GET_BASIC_CATALOG success");
                    console.log(data);
                    $scope.mydata = data;
                    // chartResourceData.drilldownDataSeries=data;
                }).
                error(function(data, status) {

                    spsdalRestapiService.displayErrorMsg(data, status);
                });
            };
        getmydata().then(function(datas) {

                 getGraph2Data(datas);
                //alert(data);

            });
                var getGraph2Data = function(datas) {

                    var chartResourceData = {};
                    chartResourceData.chartId = "spsdalHighchartBar";
                    chartResourceData.chartType = "column";
                    chartResourceData.chartTitle = "Total Volume of Data Downlink over time";
                    chartResourceData.chartXAxisTitle = "";

                    chartResourceData.xAxisCategories =['Jan', 'Feb', 'Mar', 'April', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                    chartResourceData.dAxisCategories=['Day1', 'Day2', 'Day3', 'Day4', 'Day5', 'Day6', 'Day7', 'Day8', 'Day9', 'Day9', 'Day10', 'Day11','Day12','Day13','Day14','Day15','Day16','Day17','Day18'];
                    chartResourceData.chartYAxisTitle = "Volume (C)";
                    chartResourceData.enableXAxisZoom = true;

                    var series1Data = { name: 'Airtel',

                    data: [{
                        name: 'Jan',
                        y: 330,
                        drilldown: 'Jan'
                    }, 120, 135, 203, 80, 50, 69, 99, 45, 120, 120, 135] 

                };
                    var series2Data = { name: 'Vodafone',

                    data: [{
                        name: 'Jan',
                        y: 133,
                        drilldown: 'Jan'
                    }, 156, 947, 408, 61, 20, 135, 203, 80, 50, 69, 99] };


                    chartResourceData.dataSeries = [series1Data,series2Data];



                     console.log(datas);
                     chartResourceData.drilldownDataSeries=datas;



                    return chartResourceData;
                }; 

            **and my json data**

        {"drilldown":{"series":[{
            "name": "Airtel",
            "id": "Jan",
            "data": [
                [
                    "Day1",
                    10
                ],
                [
                    "Day2",
                    20
                ],
                [
                    "Day3",
                    30
                ],
                [
                    "Day4",
                    40
                ],
                [
                    "Day5",
                    30
                ],
                [
                    "Day6",
                    30
                ],
                [
                    "Day7",
                    25
                ],
                [
                    "Day8",
                    40
                ],
                [
                    "Day9",
                    45
                ],
                [
                    "Day10",
                    45
                ],
                [
                    "Day11",
                    30
                ],
                [
                    "Day12",
                    50
                ],
                [
                    "Day13",
                    60
                ],
                [
                    "Day14",
                    50
                ],
                [
                    "Day15",
                    60
                ],
                [
                    "Day16",
                    70
                ],
                [
                    "Day17",
                    80
                ],
                [
                    "Day18",
                    90
                ],
                [
                    "Day19",
                    40
                ],
                [
                    "Day20",
                    50
                ]
            ]
                    }]
                    }
                    }
  

还有我正在处理数据的控制器。

var converToHighcharts = function(dashboardData) {
                    var graphConfigData = {};
                    graphConfigData.id = dashboardData.chartId;

                    graphConfigData.credits = {enabled: false };

                    graphConfigData.chart = {};
                    graphConfigData.chart.type = dashboardData.chartType;

                    graphConfigData.title = {};
                    graphConfigData.title.text = '';//dashboardData.chartTitle;                    
                    $scope.title=dashboardData.chartTitle;
                    graphConfigData.subtitle ={};
                    graphConfigData.subtitle.text = '';

                    graphConfigData.xAxis = {};
                    /* this exporting to disable default export button*/
                    graphConfigData.exporting= {
                                enabled: false
                    };
                    graphConfigData.xAxis.categories = dashboardData.xAxisCategories;

                    var index=_.findIndex($scope.selectbox, function(o) { return o.graphType == dashboardData.chartType; });
                    if(index>-1){
                         $scope.selectedChartName=$scope.selectbox[index].name;
                         $scope.selectedIcon=$scope.selectbox[index].icon;
                    }
                    $scope.chartType=dashboardData.chartType;
                    if (dashboardData.chartType == 'areaspline') {

                        graphConfigData.xAxis.plotBands = [{
                                                        from: 4.5,
                                                        to: 6.5,
                                                        color: 'rgba(68, 170, 213, .2)'
                                                    }];

                        graphConfigData.chart = { zoomType: 'x' };

                        graphConfigData.plotOptions = { areaspline: { fillOpacity: 0.5 } }                                                    
                    } else if (dashboardData.chartType == 'pie') {
                        graphConfigData.plotOptions =  {
                                                            pie: {
                                                                allowPointSelect: true,
                                                                cursor: 'pointer',
                                                                dataLabels: {
                                                                    enabled: true,
                                                                   // format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                                                    style: {
                                                                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                                                    }
                                                                }
                                                            }
                                                        }
                    }

                    graphConfigData.xAxis.title = {};
                    graphConfigData.xAxis.title.text = dashboardData.chartXAxisTitle;

                    graphConfigData.yAxis = {};
                    graphConfigData.yAxis.min = 0;

                    graphConfigData.yAxis.title = {};
                    graphConfigData.yAxis.title.text = dashboardData.chartYAxisTitle;

                    graphConfigData.yAxis.labels = {};
                    graphConfigData.yAxis.labels.overflow = 'justify';

                    graphConfigData.yAxis.tooltip = {};
                    graphConfigData.yAxis.tooltip.valueSuffix = dashboardData.chartYAxisValueSuffix;

                    graphConfigData.plotOptions = {};
                    graphConfigData.plotOptions.bar = {};
                    graphConfigData.plotOptions.bar.dataLabels = {};
                    graphConfigData.plotOptions.bar.dataLabels.enabled = true;

                    // graphConfigData.legend = {
                    //  layout: 'vertical',
                    //  align: 'right',
                    //  verticalAlign: 'top',
                    //  x: -40,
                    //  y: 80,
                    //  floating: true,
                    //  borderWidth: 1,
                    //  backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                    //  shadow: true
                    // };

                    graphConfigData.series= [];
                    if (dashboardData.chartType == 'line') {
                        for (var i=0;i<dashboardData.dataSeries.length;i++) {
                            for(var j=0;j<dashboardData.dataSeries[i].data.length;j++) {
                                dashboardData.dataSeries[i].data[j].name = {};
                                dashboardData.dataSeries[i].data[j].name = dashboardData.dataSeries[i].data[j].x;
                                delete dashboardData.dataSeries[i].data[j].x;
                            }
                            graphConfigData.series.push(dashboardData.dataSeries[i]);
                        }
                    } else if (dashboardData.chartType == 'pie'){
                       for (var i=0;i<dashboardData.dataSeries.length;i++) {
                            graphConfigData.series.push(dashboardData.dataSeries[i]);
                        }
                    } else {
                        for (var i=0;i<dashboardData.dataSeries.length;i++) {
                            graphConfigData.series.push(dashboardData.dataSeries[i]);
                        }
                    } 

                    if (dashboardData.drilldownDataSeries) {
                        graphConfigData.drilldown = dashboardData.drilldownDataSeries;
                        graphConfigData.xAxis.categories=dashboardData.dAxisCategories;
                    }
                    // if (dashboardData.addSeriesAsDrilldown) {
                    //     graphConfigData.drilldown = dashboardData.addSeriesAsDrilldown;
                    //     graphConfigData.xAxis.categories=dashboardData.dAxisCategories;
                    // }



                    return graphConfigData;
                };

0 个答案:

没有答案