Ich versuche, gemischte Diagramm mit Dual-Y-Achse mit Zingcharts-angularjs Direktive zu machen.Wie richte ich zwei Y-Achsen in Zingcharts-angularjs?
Für die duale Y-Achse folgen Sie dem "scale-y-2" -Muster, aber es funktionierte nicht in meiner AngularJS-Anwendung. Kann jemand zwei Y-Achsen in Zingcharts-angularjs rendern?
Das Hinzufügen mehrerer Skalierungs-Ys zu ZingChart in der Angular-Direktive ist das gleiche wie bei Vanilla JavaScript.
Zuerst sollten Sie sicher sein, ein "scale-y-2": {} -Objekt in Ihr Diagramm aufzunehmen. Die Min: Max: Step-Werte sollten von Ihren Serienwerten erben, aber dies kann explizit festgelegt werden, wenn dies gewünscht wird.
Als nächstes müssen Sie sicherstellen, dass jeder Satz von Serienwerten mit der entsprechenden Skala-y verknüpft wird. Dazu gehört ein "scales": "" -Attribut. Dies akzeptiert eine Zeichenfolge mit zwei kommagetrennten Werten. Sie möchten angeben, welches scale-x und welches scale-y Sie der Serie zuordnen möchten.
Derzeit akzeptiert ZingChart keine camel case-Werte für scaleY2. Dies muss in JSON als "scale-y-2" dargestellt werden.
Der unten stehende Code sollte Ihnen das liefern, was Sie brauchen. Ich habe Kommentare zu den Zeilen gegeben, die Ihnen in Ihrem Chart wahrscheinlich fehlen.
Wenn Sie ein Live-Beispiel sehen möchten, können Sie den folgenden Code ausführen.
var app = angular.module('myApp',['zingchart-angularjs']);
app.controller('MainController', function($scope){
$scope.myJson = {
globals : {
shadow: false
},
type : 'bar',
plot:{
},
backgroundColor : "#fff",
scaleY :{
lineColor : "#BDBFC1",
lineWidth: "2px",
tick:{
lineWidth: "0px"
}
},
"scale-y-2" : { //add scale-y-2
},
scaleX :{
lineColor : "#BDBFC1",
lineWidth: "2px",
tick:{
lineWidth: "0px"
}
},
series : [
{
values : [54,23,34,23,43],
scales: "scale-x, scale-y", //associate scales to series
lineColor : "#D2262E",
lineWidth : "2px",
marker : {
backgroundColor: "#D2262E",
borderWidth : "0px"
}
},
{
values : [1000,1500,1600,2000,4000],
lineColor : "#2FA2CB",
scales: "scale-x, scale-y-2", //associate scales to series
lineWidth : "2px",
marker : {
backgroundColor: "#2FA2CB",
borderWidth : "0px"
}
},
]
};
});html,body{
margin: 0px;
}<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://cdn.zingchart.com/angular/zingchart-angularjs.js"></script>
<body ng-app="myApp">
<div ng-controller="MainController">
<div zingchart id="chart-1" zc-json="myJson" zc-width="100%" zc-height="568px"></div>
</div>
</body>Hinweis: Ich bin auf dem ZingChart Team. Bitte lassen Sie mich wissen, wenn Sie weitere Fragen haben.
Die Frage wurde klarer – Rick