Question

我有一个包含列表菜单的页面

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

但我想在选择折线图或其他图表并在页面中显示时，其他图表选择如折线图，饼图或....不要删除页面中存在的图表，每个选定的图表形成列表显示在页面上不同的数据

实际上没有限制在页面

中创建图表

1 - 从数据

的图表列表中选择图表

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

还有更多

角度图表示例

＆＃13;

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
    }
  };




});

＆＃13;

<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>

＆＃13;

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，因为系列更改不会强制重建图表。

角度多选图表

1 个答案: