Próbuję utworzyć mieszany wykres z podwójną osią Y przy użyciu dyrektywy zingcharts-angularjs.Jak renderować dwie osie y w zingcharts-angularjs?
Dla podwójnej osi Y, należy wykonać „skalę-y-2” wzoru, ale to nie działa w mojej aplikacji angularjs. Czy ktoś wie, jak renderować dwie osie y w zingcharts-angularjs?
Dodanie wielu skal-y do ZingChart w dyrektywie Angular jest takie samo jak w przypadku wanilii JavaScript.
Najpierw będziemy chcieli, aby upewnić się zawierać „skalę-y-2”: {} obiekt na wykresie. Wartości min: max: step powinny być dziedziczone z wartości serii, ale można to jawnie ustawić, jeśli zachodzi taka potrzeba.
Następnie należy koniecznie powiązać każdy zestaw wartości serii z odpowiednią skalą -y. Aby to zrobić, należy użyć atrybutu "scale": "". Spowoduje to przyjęcie ciągu znaków z dwiema wartościami oddzielonymi przecinkami. Będziesz chciał zadeklarować, która skala-x i jaką skalę-y chcesz skojarzyć z serią.
Obecnie ZingChart nie przyjmuje wartości wielkości wielbłąda dla skaliY2. To musi być reprezentowane w JSON jako "scale-y-2".
Poniższy kod powinien dostarczyć Ci tego, czego potrzebujesz. Dostarczyłem komentarze na temat linii, których prawdopodobnie brakuje na twoim wykresie.
Jeśli chcesz zobaczyć działający przykład, możesz uruchomić poniższy kod.
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>Uwaga: Jestem w zespole ZingChart. Daj mi znać, jeśli masz dodatkowe pytania.
Ulepszone pytanie – Rick