Sto provando a creare un grafico misto con il doppio asse y utilizzando la direttiva zingcharts-angularjs.Come eseguire il rendering di due assi y in zingcharts-angularjs?
Per il doppio asse Y, si segue il modello 'scale-y-2', ma non ha funzionato nella mia applicazione AngularJS. Qualcuno sa come eseguire il rendering di due assi y in zingcharts-angularjs?
L'aggiunta di più scale-y a ZingChart nella direttiva Angular è la stessa di JavaScript con vaniglia.
Prima di tutto, assicurati di includere un "scale-y-2": {} oggetto sul grafico. I valori min: max: step dovrebbero ereditare dai valori della serie, ma questo può essere impostato in modo esplicito se lo si desidera.
Successivamente è necessario assicurarsi di associare ciascun set di valori di serie alla scala-y appropriata. Per fare questo include un attributo "scale": "". Questo accetterà una stringa con due valori separati da virgola. Dovrai dichiarare quale scala-x e quale scala-y vuoi associare alla serie.
Attualmente ZingChart non accetta i valori del caso cammello per la scalaY2. Questo deve essere rappresentato in JSON come "scale-y-2".
Il seguente codice dovrebbe fornire quello che ti serve. Ho fornito commenti sulle linee che probabilmente manchi nel grafico.
Se si desidera vedere un esempio di lavoro dal vivo è possibile eseguire il codice qui sotto.
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>Nota: Sono sulla squadra ZingChart. Per favore fatemi sapere se avete altre domande.
Rende più chiara la domanda – Rick