2016-04-01 10 views
0

Ich habe zwei fiddles: no angular und using angular. Der mit dem Winkel funktioniert nicht richtig. Es zeigt keine Daten in xAxis an und verwendet nicht Prozent für yAxis. Gibt es etwas Besonderes zu tun, um mit eckigen arbeiten zu können?Highcharts-ng mit mehreren Serien zeichnen Diagramm falsch

Keine Winkel html

<script src="https://code.highcharts.com/stock/highstock.js"></script> 
 
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
 
<div id="container" style="height: 400px; min-width: 310px"></div>

Angular html

<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/stock/highstock.js"></script> 
 
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="myctrl"> 
 
     <highchart id="chart1" config="ipo" class="span9"></highchart> 
 
    </div> 
 
</div>

Nicht Winkel Javascript

$(function() { 
 

 
    function createChart() { 
 

 
     $('#container').highcharts('StockChart', { 
 

 
      rangeSelector: { 
 
       selected: 4 
 
      }, 
 

 
      yAxis: { 
 
       labels: { 
 
        formatter: function() { 
 
         return (this.value > 0 ? ' + ' : '') + this.value + '%'; 
 
        } 
 
       }, 
 
       plotLines: [{ 
 
        value: 0, 
 
        width: 2, 
 
        color: 'silver' 
 
       }] 
 
      }, 
 

 
      plotOptions: { 
 
       series: { 
 
        compare: 'percent' 
 
       } 
 
      }, 
 

 
      tooltip: { 
 
       pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', 
 
       valueDecimals: 2 
 
      }, 
 

 
      series: [{ 
 
      name: 'IPO', 
 
      data: [[1381881600000, 20.34], [1381968000000, 20.43], [1382054400000, 20.72]] 
 
     }, { 
 
      name: 'SPX', 
 
      data: [[1381881600000, 1721.54], [1381968000000, 1733.15], [1382054400000, 1744.5]] 
 
     }] 
 
     }); 
 
    } 
 
createChart(); 
 
    
 
});

Angular JavaScript

var myApp = angular.module('myApp', ['highcharts-ng']); 
 
myApp.controller('myctrl', BindingCode); 
 
myApp.factory("Factory", Factory); 
 

 
function ipo() { 
 
    this.chartConfig = { 
 
     rangeSelector: { 
 
      selected: 4 
 
     }, 
 

 
     yAxis: { 
 
      labels: { 
 
       formatter: function() { 
 
        return (this.value > 0 ? ' + ' : '') + this.value + '%'; 
 
       } 
 
      }, 
 
      plotLines: [{ 
 
       value: 0, 
 
       width: 2, 
 
       color: 'silver' 
 
      }] 
 
     }, 
 

 
     plotOptions: { 
 
      series: { 
 
       compare: 'percent' 
 
      } 
 
     }, 
 

 
     tooltip: { 
 
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', 
 
      valueDecimals: 2 
 
     }, 
 

 
     series: [{ 
 
      name: 'IPO', 
 
      data: [[1381881600000, 20.34], [1381968000000, 20.43], [1382054400000, 20.72]] 
 
     }, { 
 
      name: 'SPX', 
 
      data: [[1381881600000, 1721.54], [1381968000000, 1733.15], [1382054400000, 1744.5]] 
 
     }] 
 
    } 
 
} 
 

 
function BindingCode($scope,Factory) { 
 
    $scope.ipo = Factory.CreateChart(); 
 
    $scope.ipo = $scope.ipo.chartConfig; 
 
} 
 

 
function Factory() { 
 
    return { 
 
     CreateChart: function() { 
 
      return new ipo(); 
 
     } 
 
    } 
 
}

nicht eckig Bildschirm enter image description here

Angular screenshot enter image description here

Antwort

0

Das Problem ist, dass nicht alle Highchart-Optionen in die Top-Level-JSON-Konfiguration gehen.

Vom FAQ:

Warum funktioniert meine Plotoptionen/Tooltip/Drill-Down/andere Funktion?

Mindestens die Hälfte aller eingereichten Probleme ist darauf zurückzuführen. Bevor Sie ein Problem einreichen lesen Sie dies! Ein häufiger Fehler besteht darin, andere Highcharts-Optionen direkt in die chartConfig einzufügen. Wenn die Highcharts-Option, die Sie möchten, oben nicht aufgeführt ist, möchten Sie sie wahrscheinlich in chartConfig.options setzen.

In Ihrem Fall müssen Sie alles außer 'series' in ein Optionsobjekt verschieben.

chartConfig = { 
    options : { 
     rangeSelector: { 
      selected: 4 
     }, 
     type: "line", 
     plotLines: [{ 
       value: 0, 
       width: 2, 
       color: 'silver' 
       }], 
     plotOptions: { 
      series: { 
       compare: 'percent' 
      } 
     }, 
     tooltip: { 
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', 
      valueDecimals: 2 
     }, 
     yAxis: { 
      labels: { 
       formatter: function() { 
        return (this.value > 0 ? ' + ' : '') + this.value + '%'; 
       } 
      }, 
     } 
     }, 
    series: [{ 
      name: 'IPO', 
      data: [[1381881600000, 20.34], [1381968000000, 20.43], [1382054400000, 20.72]] 
      }, { 
      name: 'SPX', 
      data: [[1381881600000, 1721.54], [1381968000000, 1733.15], [1382054400000, 1744.5]] 
    }] 
} 

Aktualisiert Geige

https://jsfiddle.net/mgwkzob3/1/

Verwandte Themen