角多選圖表

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

​​

實施例：http://jsfiddle.net/3mbykr8n/

只有在這裏的問題是改變從或到bar串聯型時。 bar迫使圖表將被倒置，所以你需要重建的圖表在這種情況下。將系列類型更改爲bar將爲您提供column，因爲系列更改不會強制執行圖表重建。