Question

学习AngularJS和HighCharts。 [Plunker Link] [1]

我想了解如何从JSON对象获取数据并动态更新x轴和条形图值的值。 Y轴值是常数。现在我对值进行了硬编码，我希望后端的x轴和条形图值。

这是我尝试过的 -

＆＃13;

conv1

＆＃13;

(function() {
  'use strict';
  angular.module('myModule', [])
    // Directive for generic chart, pass in chart options
    .directive('hcChart', function() {
      return {
        restrict: 'E',
        template: '<div></div>',
        scope: {
          options: '='
        },
        link: function(scope, element) {
          Highcharts.chart(element[0], scope.options);
        }
      };
    })

  .controller('MainCtrl', function($scope, $http) {

    $scope.chartData = [];
    $scope.totalCostList = [];

    loadChartData();

    function loadChartData() {
      var httpRequest = $http({
        method: 'GET',
        url: './example.json'
      }).then(function(response) {
        console.log(response.data);
        $scope.chartData = response.data;
        console.log("length:" + $scope.chartData.activityResponse.length);
        for (var i = 0; i < $scope.chartData.activityResponse.length; i++) {
          $scope.totalCostList.push(parseInt($scope.chartData.activityResponse[i].totalCost));
        }
        console.log($scope.totalCostList);
      });
    }

    //var chartData = $scope.totalCostList;
    var yAxisLabels = [1, 5000, 10000, 15000, 20000];
    var chartData = [
      10000, 5000, 4000, 15000, 16000, 10000, 5000, 4000, 15000, 2000,
      10000, 5000, 4000, 15000, 16000, 10000, 5000, 4000, 15000, 2000,
      10000, 5000, 4000, 15000, 16000, 10000, 5000, 4000, 15000, 2000,
      10000, 5000, 4000, 15000, 16000, 10000, 5000, 4000, 15000, 2000,
      10000, 5000, 4000, 15000, 16000, 10000, 5000, 4000, 15000, 2000,
      10000, 5000
    ];
    var dateLine = Date.UTC(2015, 0, 1);
    Highcharts.getOptions().colors[0] = {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 1
      },
      stops: [
        [0, '#6EB7D8'],
        [0.4, '#2989D8'],
        [0.7, '#207cca'],
        [1, '#1E5799']
      ]
    };

    Highcharts.setOptions({
      lang: {
        thousandsSep: ','
      }
    });
    //To give the chart a bounce effect
    Math.easeOutBounce = function(pos) {
      if ((pos) < (1 / 2.75)) {
        return (7.5625 * pos * pos);
      }
      if (pos < (2 / 2.75)) {
        return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
      }
      if (pos < (2.5 / 2.75)) {
        return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
      }
      return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
    };
    $scope.chartOptions = {
      chart: {
        type: 'column',
        margin: [70, 30, 30, 80]
      },
      exporting: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      legend: {
        enabled: false
      },
      title: {
        text: 'Weekly Inventory at Cost',
        style: {
          color: '#333'
        },
        align: 'left',
        x: 10,
        y: 20

      },

      xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
          month: '%b'
        },
        lineColor: '#333',
        tickColor: '#333',
        crosshair: true,
        startOnTick: false,
        endOnTick: false,
        minPadding: 0,
        maxPadding: 0,
        tickmarkPlacement: 'on',
        labels: {
          align: 'left',
          rotation: 0
        }
      },
      yAxis: {
        crosshair: true,
        lineColor: '#333',
        tickColor: '#333',
        tickPositioner: function() {
          return yAxisLabels;
        },
        labels: {
          format: '{value:,.0f}'
        },
        title: {
          enabled: false
        },
        lineWidth: 1,
        tickWidth: 1,
        id: 'cost',
        gridLineWidth: 0,
        min: 1
      },


      plotOptions: {
        column: {
          pointPadding: 0.1,
          borderWidth: 0,
          pointPlacement: 'between'
        }
      },
      shadow: true,

      series: [{
        data: chartData,
        pointStart: dateLine,
        pointInterval: 7 * 24 * 3600 * 1000 // 7days
      }]
    };
  });

})();

＆＃13;

我的示例JSON - {＆＃34;消息＆＃34;：＆＃34;成功＆＃34;，＆＃34; status＆＃34;：＆＃34; OK＆＃34;，＆＃34; activityResponse＆＃34;：[{ ＆＃34; storeNo＆＃34;：＆＃34; 00208＆＃34;，＆＃34; wk＆＃34;：＆＃34; 1＆＃34;，＆＃34;年＆＃34;：＆＃34; 2016＆＃34;，＆＃34; totalCost＆＃34;：＆＃34; 349622.9＆＃34; }，{ ＆＃34; storeNo＆＃34;：＆＃34; 00208＆＃34;，＆＃34; wk＆＃34;：＆＃34; 2＆＃34;，＆＃34;年＆＃34;：＆＃34; 2016＆＃34;，＆＃34; totalCost＆＃34;：＆＃34; 2000＆＃34; }， { ＆＃34; storeNo＆＃34;：＆＃34; 00208＆＃34;，＆＃34; wk＆＃34;：＆＃34; 3＆＃34;，＆＃34;年＆＃34;：＆＃34; 2016＆＃34;，＆＃34; totalCost＆＃34;：＆＃34; 15000＆＃34; }] }

Answer 1

这是一种添加到x轴类别和更新类别值的方法。创建图表时，抓取对图表系列的引用。

var series = this.series[0];

然后，当数据更新时，请进行以下调用。

series.setData(seriesDataSource, true, true, false);

我已经调整了您的Plunker，以显示添加和更新系列记录的图表示例。 https://embed.plnkr.co/SWGuRTyTM3AU6yhptYvM/

从Json对象渲染AngularJS中的HighCharts

1 个答案: