javascript - Angular 多选图表

Question

我有一个带有列表菜单的页面

通过使用列表菜单，我可以创建如下图表:折线图或条形图或饼图或......。

但我希望当选择折线图或其他图表并在页面中显示时，选择其他图表，如折线图、饼图或....不要删除页面中的现有图表，并且列表中的每个选定图表都会显示在页面上不同的数据

在页面中创建图表实际上没有限制

1 - 从包含数据的图表列表中选择图表

2 - 选择不同数据的其他图表

.

.

.

还有更多

Angular 图示例

var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {

  $scope.chartTypes = [
    {"id": "line", "title": "Line"},
    {"id": "spline", "title": "Smooth line"},
    {"id": "area", "title": "Area"},
    {"id": "areaspline", "title": "Smooth area"},
    {"id": "column", "title": "Column"},
    {"id": "bar", "title": "Bar"},
    {"id": "pie", "title": "Pie"},
    {"id": "scatter", "title": "Scatter"}
  ];


  $scope.chartSeries = [
    {"name": "Some data", "data": [1, 2, 4, 7, 3]},
    {"name": "Some data 3", "data": [3, 1, 9, 5, 2]}
  ];




  $scope.addSeries = function () {
    var rnd = [];
    $scope.chartConfig.series.push({
      data: rnd
    })
  };



  $scope.removeSeries = function (id) {
    var seriesArray = $scope.chartConfig.series;
    seriesArray.splice(id, 1)
  };




  $scope.chartConfig = {
    options: {
      chart: {
        type: 'areaspline'
      }
    },
    series: $scope.chartSeries,
    title: {
      text: 'Hello'
    },
    credits: {
      enabled: true
    }
  };




});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.src.js"></script>
<script src="http://pablojim.github.io/highcharts-ng/javascripts/highcharts-ng.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"rel="stylesheet"/>
<div ng-app="myapp">
    <div ng-controller="myctrl">
        <div class="row">
            <div class="span9">
                <div class="row">
                    <highchart id="chart1" config="chartConfig" class="span9" ></highchart>
                </div>
            </div>
            <div class="span4">
                <div class="row-fluid">Default Type <select ng-model="chartConfig.options.chart.type" ng-options="t.id as t.title for t in chartTypes"></select></div>
                <div class="row-fluid"><button ng-click="addSeries()">Add Series</button></div>
            </div>
        </div>
    </div>
</div>

Answer 1

当对图表配置中的选项对象进行更改时，Highcharts-ng 正在重建您的图表。如果您将系列设置系列类型，则应触发 Series.update()。

在 Highcharts-ng 中:

scope.$watch('config.series', function (newSeries, oldSeries) {
    var needsRedraw = processSeries(newSeries);
    if (needsRedraw) {
      chart.redraw();
    }
  }, true);

让我们观察新变量的变化，如果它发生变化，让我们改变所有系列的类型。

$scope.seriesType = 'areaspline';

$scope.chartSeries = [
  {"name": "Some data", "data": [1, 2, 4, 7, 3], "type": $scope.seriesType},
  {"name": "Some data 3", "data": [3, 1, 9, 5, 2], "type": $scope.seriesType}
];

$scope.$watch('seriesType', function (newType, oldType) {
  var series = $scope.chartConfig.series,
     len = series.length;
  for(var i = 0; i < len; i++){
    series[i].type = newType;
  }
}, true);

在 HTML 中:

<div class="row-fluid">Default Type <select ng-model="seriesType" ng-options="t.id as t.title for t in chartTypes"

示例:http://jsfiddle.net/3mbykr8n/

这里唯一的问题是从或更改为 bar 系列类型。 bar 强制图表反转，因此在这种情况下您需要重建图表。将系列类型更改为 bar 将为您提供 column，因为系列更改不会强制重建图表。