amCharts没有验证数据

时间:2017-08-24 12:51:03

标签: javascript jquery charts amcharts

我的网站上有一些饼图和连续图表,当没有数据时,两张图表无法正常显示。一个图表(饼图)不显示任何内容,另一个图表(序列)抛出错误amcharts.js:113 Uncaught TypeError: Cannot read property 'push' of undefined

我通过Ajax获取数据,并检查了控制台的响应数据。

这是我的饼图代码:

jQuery.post('http://....', data, function(response) {       
            types_ytd = (response)         
            dataProvider = generateChartDataYtd();
            chart = AmCharts.makeChart("chartdiv_ytd", {
              "type": "pie",
              "theme": "light", 
              "dataProvider": dataProvider,
              "labelText": "[[title]]: [[value]]%",
              "balloonText": "[[title]]: [[value]]% [[[description]]]",
              "titleField": "type",
              "valueField": "percent",
              "descriptionField":"sales",
              "outlineColor": "#FFFFFF",
              "outlineAlpha": 0.8,
              "outlineThickness": 2,
              "colorField": "color",
              "pulledField": "pulled",
              "titles": [{
                "text": ""
              }],
              "listeners": [{
                "event": "clickSlice",
                "method": function(event) {
                  var chart = event.chart;
                  if (event.dataItem.dataContext.id != undefined) {
                    selected = event.dataItem.dataContext.id;
                  } else {
                    selected = undefined;
                  }
                  chart.dataProvider = generateChartDataYtd();
                  chart.validateData();
                }
              }],
              "export": {
                "enabled": true
              }
            });

            AmCharts.addInitHandler(function(chart) {

              // check if data is mepty
              if (chart.dataProvider === undefined || chart.dataProvider.length === 0) {
                // add some dummy data
                var dp = {};
                dp[chart.titleField] = "";
                dp[chart.valueField] = 1;
                chart.dataProvider.push(dp)

                var dp = {};
                dp[chart.titleField] = "";
                dp[chart.valueField] = 1;
                chart.dataProvider.push(dp)

                var dp = {};
                dp[chart.titleField] = "";
                dp[chart.valueField] = 1;
                chart.dataProvider.push(dp)

                // disable slice labels
                chart.labelsEnabled = false;

                // add label to let users know the chart is empty
                chart.addLabel("50%", "50%", "The chart contains no data for selected month", "middle", 15);

                // dim the whole chart
                chart.alpha = 0.3;
              }

            }, ["pie"]);

                    }, 'json');

Here's the serial chart code: 

jQuery.post('http://...', data, function(response) {
    types_model_ytd = (response)     
    dataProvider = generateChartDataModelYtd(); 

    chart = AmCharts.makeChart("chartdiv_model_ytd", {
      "type": "serial",
      "theme": "none",
      "dataProvider": dataProvider,
      "valueAxes": [{
        "axisAlpha": 0,
        "position": "left",
        "title": "%"
      }],
      // set startDuration to 0 on older browsers
      "startDuration": supportsSVG() ? 0 : 0,
      "graphs": [{
        "balloonText": "[[category]]: [[value]]% [[[sales]]]",
        "colorField": "color",
        "fillAlphas": 0.9,
        "lineAlpha": 0.2,
        "type": "column",
        "valueField": "percent",
        "fixedColumnWidth": 20
      }],
      "chartCursor": {
        "categoryBalloonEnabled": false,
        "cursorAlpha": 0,
        "zoomable": false
      },
      "categoryField": "type",
      "categoryAxis": {
        "gridPosition": "start",
        "labelRotation": 45
      }
    });

    AmCharts.checkEmptyData = function(chart) {
        if (0 == chart.dataProvider.length) {
        // set min/max on the value axis
        chart.valueAxes[0].minimum = 0;
        chart.valueAxes[0].maximum = 0;

        // add dummy data point
        var dataPoint = {
          dummyValue: 0
        };
        dataPoint[chart.categoryField] = '';
        chart.dataProvider = [dataPoint];

        // set opacity of the chart div
        chart.chartDiv.style.opacity = 0.5;

        //remove balloonText and labels
        chart.categoryAxis.labelFunction = function(valueText) {
          return '';
        }
        // add label
        chart.addLabel(1, '50%', 'The chart contains no data for selected month', 'center');

        // redraw it
        chart.validateNow();
      }
    }
      AmCharts.checkEmptyData(chart); 

            }, 'json');

我已经尝试了我能找到的所有解决方案,但没有任何效果,任何帮助或建议都将不胜感激,谢谢。

0 个答案:

没有答案