javascript - highcharts-ng と angularjs を使用して複数のハイチャートを描画する方法

Question

アプリケーションで highcharts-ngと angular js を使用しています。単純なケースでは、1 つのレスト サービスを呼び出すことができ、それを使用してグラフをプロットできます。しかし、私のシナリオでは、同じフォーム入力で 2 つの残りのサービスを呼び出し、両方の応答 (つまり、最初の応答を含む最初のグラフと他の応答を含む 2 番目のグラフ) に基づいて 2 つのグラフを同時に描画する必要があります。いくつか試してみたのですが、片方のグラフしか描けず、もう片方を描こうとするとページ全体がリセットされてしまいます。それを行う方法についてのヘルプ。

Answer 1

これがあなたの問題に対処する私の方法です。私は大丈夫です。

最初: サービスで drawChart を作成する

   angular.module('chartApp')
     .factory('drawChart', function () {
     return {
      lineChart: function (args) {
    // Draw charts
   var charts = [],
       chart;

    // agrs: this is variable mutable        
    var maps = args.maps,
        color = args.color,
        width = args.width,
        height = args.height,
        lablesY = args.lablesY,
        lablesX = args.lablesX,
        title = args.title;

    angular.forEach(maps, function (map) {
      chart = {            
        animation: true,
        options: {
          legend: {
            enabled: false   
          }
        },
        title: title,
        series: [{
          data: map,
          enableMouseTracking: false,
          color: color,
          marker: {
            enabled: false
          }
        }],
        loading: false,
        yAxis: {
          currentMin: 0,
          currentMax: 100,
          lineColor: '#cacaca',
          lineWidth: 1,
          gridLineWidth: null,
          labels: lablesY,
          title: null
        },   
        xAxis: {
          currentMin: 0,
          labels: lablesX,
          lineColor: '#cacaca',
          lineWidth: 1,
          tickWidth: 0
        },
        size: {
          width: width,
          height: height
        }
      };

      charts.push(chart);
    });

  return charts;
  }
  };

  });

2番目にコントローラーで呼び出します

// Draw charts
var chartArgs = {
  maps: $scope.maps, 
  color: '#0ec679', 
  width: 245, 
  height: 125,
  lablesY: {
    enabled: false,
  },
  lablesX: {
    enabled: false,
  },
  title: {
    text: ''
  }
};

if (Object.keys($scope.maps).length != 0) {
  $scope.chartMaps = drawChart.lineChart(chartArgs);
}      

サード イン ビュー

<highchart config="chartMaps[$index]"></highchart>

Answer 2

これが私の解決策です：

Javascript:

// first chart
$scope.chartConfig1 = {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Fruit Consumption'
  }, ...
};

// second chart
$scope.chartConfig2 = {
  chart: {
    type: 'line'
  },
  title: {
    text: 'Fruit Consumption'
  }, ...
};

HTML:

<!-- first chart -->
<div id="chartA">
  <highchart id="chart1" config="chartConfig1"></highchart>
</div>

<!-- second chart -->
<div id="chartB">
  <highchart id="chart2" config="chartConfig2"></highchart>
</div>

パラダイムを無期限に繰り返すことができます