Question

我得到＆＃34;给定轴上的所有系列必须具有相同的数据类型＆＃34;加载数据时。请在下面的链接中找到小提琴代码

var app = angular.module('app', []);

app.directive('chart', function() {

return {
    restrict: 'EA',
    replace: true,
    scope: {
        data: '=data'
    },
   // template: '<div class="chart"></div>',
    link: function(scope, element, attrs) {

        var chart = new google.visualization.LineChart(element[0]);
        var options = {
    hAxis: {

      gridlines: {
             color: 'transparent'
        },

        format :"MMM dd",
        textStyle:{
            color: '#FFF',
            fontName: 'Verdana', 
            fontSize: 11

        },

       showTextEvery:2

    },
    vAxis: {

     gridlines:{
            count:4,
            color: '#FFF'
        },

        baselineColor:"#FFF",
        format: '#\'%\'',
      textStyle:{
            color: '#FFF',
            fontName: 'Verdana', 
            fontSize: 11

         },

    },
      pointSize: 6,
      pointShape: { type: 'circle' },
      lineWidth:2,
    legend: {
            position: 'none'
            },
    backgroundColor: '#000000',

      tooltip: {
          textStyle: { 
                    fontName: 'Calibri', 
                    fontSize: 12 
                    }
        }


  };

        scope.$watch('data', function(v) {

            var data = google.visualization.arrayToDataTable(v);
            chart.draw(data, options);

        });

    }
};

});

 app.controller('ChartController', function($scope) {

   $scope.scoreHistory = [];
  $scope.loadDataFromServer = function() {

    var x = [
        ['interval', 'count','color']
    ];

    var scoreHistory = [
         {
             intervalStart:new Date(2013, 5,1),
             count:33,                         
             color:'#ED1C24'
         },
         {
             intervalStart:new Date(2013, 5,7), 
             count:50,
             color: '#FFC90E'
         },
         {
             intervalStart:new Date(2013, 5,8), 
             count:22,
             color: '#ED1C24'
         },
         {
             intervalStart:new Date(2013, 5,9), 
             count:45,
             color: '#FFC90E'
         },
         {
             intervalStart:new Date(2013, 5,13), 
             count:83,
             color: '#ED1C24'
         },
         {
             intervalStart:new Date(2013, 5,18), 
             count:80,
             color: '#22B14C'
         },
         {
             intervalStart:new Date(2013, 5,23), 
             count:100,
             color: '#22B14C'
         }


    ];

    angular.forEach(scoreHistory, function(record, key) {

        x.push([
            record.intervalStart,
            record.count,
            record.color
        ]);

    });

    $scope.scoreHistory = x;

};

});

此控制器用于获取数据并创建角度指令以在UI中显示谷歌折线图数据。

Answer 1

你得到"All series on a given axis must be of the same data type"，因为

$scope.scoreHistory = [["interval", "count", "color"], [Sat Jun 01 2013 00:00:00 GMT+0200 (CEST), 33, "#ED1C24"], ...]

数组的第一个元素是你的系列，所有字符串和其余元素都是要显示的数据，不要认为结构就在这里，请检查link以获得看看应该怎么做。

使用angularjs和谷歌图表加载数据时出错

1 个答案: