添加拖放功能AngularJS + hightcharts

Question

我有我的功能性的Highchart正常運行，但我也想添加一個拖放選項，您可以在其中通過拖動按鈕或圖形添加新的數據系列。

我不需要一個完整的代碼答案，只是幾個函數和庫的指導方針就可以。

無論如何，我會在這裏粘貼實際代碼的一部分，你總是可以用下面的角的jsfiddle訪問：

http://jsfiddle.net/amateos/Lvc0u55v/8492/

謝謝！

HTML：

<div ng-controller="MyCtrl"> 
    Hello, {{name}}! 
</div> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<div ng-controller="MyCtrl" id="container" style="height: 400px; width: 500px"> 
    </div>  
     <div ng-controller="MyCtrl"> 
     <button ng-click="addata(0)"> addata1 </button> 
     <button ng-click="addata(1)"> addata2 </button> 
     <button ng-click="addata(2)"> addata3 </button> 
     <button ng-click="deleteLast(2)"> deleteprof </button> 
     </div> 

angularjs：

var myApp = angular.module('myApp',[]); 

//myApp.directive('myDirective', function() {}); 
//myApp.factory('myService', function() {}); 

function MyCtrl($scope) { 
    $scope.name = 'Superhero'; 

    chartOptions = { 
        chart: { 
         renderTo: 'container',//***************************** 
         type: 'area', 
        },title: { 
         text: 'Horas asignadas' 
        }, 
        xAxis: { 
         categories: ['enero', 'feb', 'mar', 'ab', 'may', 'jun', 'jul','ago','sept','oct','nov','dic'], 
         tickmarkPlacement: 'on', 
         title: { 
          enabled: false 
         } 
        }, 
        yAxis: { 
         title: { 
          text: 'horas' 
         }, 
         labels: { 
          formatter: function() { 
           return this.value ;///1000; 
           } 
          }, 
         plotLines: [{ 
          color: 'red', // Color value 
          dashStyle: 'longdashdot', // Style of the plot line. Default to solid 
          value: 8, // Value of where the line will appear 
          width: 2 // Width of the line  
         }] 
        }, 
        plotOptions: { 
         area: { 
          stacking: 'normal', 
          lineColor: '#666666', 
          lineWidth: 1, 
          marker: { 
           lineWidth: 1, 
           lineColor: '#666666' 
          } 
         } 
        }, 
        series: [{ //asignaturas 
         id: 'c', 
         name: 'extra', 
         color: 'LightSkyBlue ', 
         data: [2,3,4,3,3,4,3,2,3,3,2,1] 
        }, { 
         id: 'b', 
         name: 'Reservados', 
         color: 'red', 
         data: [1,1,2,2,3,2,2,2,4,2,2,1] 

        }, { 
         id: 'a', 
         name: 'Fijos', 
         color: 'yellow', 
         data: [2,3,4,3,4,3,2,2,2,2,3,2] 
        }] 
       } 
       $scope.newData = { 

        gruposhoras:[{ 
         id: 'd', 
         name: 'grupo1',             
         data: [1,1,1,1,1,5,1,1,1,1,1,1] 
        }, { 
         id: 'e', 
         name: 'grupo2',      
         data: [2,2,2,2,2,2,2,2,2,2,2,1] 

        }, { 
         id: 'f', 
         name: 'grupo3',      
         data: [3,3,3,3,3,3,3,3,3,3,3,3] 
        }] 
       } 

       $scope.addata=function(index){ 
        for (var i = chartOptions.series.length - 1; i >= 0; i--) { 
         if(chartOptions.series[i].id == $scope.newData.gruposhoras[index].id){ 
          return; 
         } //comprobamos que no esté ya introducido 
        } 

        chartOptions.series.reverse(); 
        var nuevaestuc = $scope.newData.gruposhoras[index]; 

        chartOptions.series.push(nuevaestuc); 
        chartOptions.series.reverse(); 


        var grafica2 = new Highcharts.chart(chartOptions); 

       }//fin addata 

       $scope.deleteLast=function(index){ 

        var tam = chartOptions.series.length -1 
        if(chartOptions.series[0].name=='Reservados' || chartOptions.series[0].name=='Fijos'){ 
         return; 
        } 
        chartOptions.series.reverse(); 
        chartOptions.series.pop(); 
        chartOptions.series.reverse(); 
        var grafica2 = new Highcharts.chart(chartOptions); 

       } 


    var grafica2 = new Highcharts.chart(chartOptions); 

} 

Answer 1

嘗試角UI格即ui-grid的拖放。