Zingcharts-angularjs yönergesini kullanarak çift y eksenli karma grafik yapmaya çalışıyorum.Zingcharts-angularjs'de iki y ekseni nasıl oluşturulur?
Çift Y ekseni için "scale-y-2" desenini izlersiniz, ancak AngularJS uygulamasında çalışmadı. Zingcharts-angularjs'de iki y eksenini nasıl oluşturacağını bilen var mı?
Köşeli Yönergede ZingChart'a çoklu ölçek-y'ler eklemek, vanil JavaScript ile aynıdır.
Önce grafiğinize "scale-y-2": {} nesnesi eklediğinizden emin olmak istersiniz. Min: max: adım değerleri seri değerlerinden miras almalıdır, ancak istenirse bu açıkça belirlenebilir.
Ardından, her dizi seri değerini uygun skala ile ilişkilendirdiğinizden emin olmalısınız. Bunu yapmak için bir "ölçekler": "" özniteliği içerir. Bu, iki virgülle ayrılmış değer içeren bir dizeyi kabul edecektir. Serinin hangi ölçek-x ile hangi skala ile ilişkilendirileceğini bildirmek istersiniz.
Halihazırda ZingChart, ölçekli2 için deve durum değerlerini kabul etmemektedir. Bu JSON'da "scale-y-2" olarak temsil edilmelidir.
Aşağıdaki kod size ihtiyacınız olanı sağlamalıdır. Grafiğinizde muhtemelen eksik olan satırlarla ilgili yorumlar verdim.
Canlı çalışan bir örnek görmek istiyorsanız, aşağıdaki kodu kullanabilirsiniz.
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>Not: Ben ZingChart takımında duyuyorum. Başka sorularınız varsa lütfen bana bildirin.
Soruyu daha açık hale getirdi – Rick