Angular multi select chart

Question

У меня есть одна страница со списком меню

Используя меню списка, я могу создать такие диаграммы, как: линейная диаграмма или гистограмма или круговая диаграмма или .....

Но я хочу, чтобы на диаграмме или другой диаграмме отображалась линейная диаграмма или другая диаграмма, другая диаграмма, выбранная как линейная диаграмма, круговая диаграмма или .... не удаляла существующие диаграммы на странице, и каждая выбранная диаграмма из списка отображается на странице с различными данными

на самом деле никаких ограничений для создания диаграмм в странице

1 - выбрать график формирования списка диаграммы с данными

2 - выбрать другую схему с различными данными

.

.

.

И еще

Пример угловой диаграммы

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-нг перестраивает диаграмму при внесении изменений в параметры объекта в конфигурации графика. Если вы зададите тип серии последовательно, то должно быть активировано Series.update().

В Highcharts-нг:

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, потому что изменения серии не заставляют перестроить диаграмму.