Tôi đang cố tạo biểu đồ hỗn hợp với trục y kép bằng cách sử dụng chỉ thị zingcharts-angularjs.Cách hiển thị hai trục y trong zingcharts-angularjs?
Đối với trục Y kép, bạn theo mẫu ‘scale-y-2’, nhưng nó không hoạt động trong ứng dụng AngularJS của tôi. Có ai biết làm thế nào để render hai trục y trong zingcharts-angularjs?
Thêm nhiều thang đo-y vào ZingChart trong chỉ thị Góc là giống với vani JavaScript.
Trước tiên, bạn sẽ muốn chắc chắn bao gồm đối tượng "scale-y-2": {} vào biểu đồ của mình. Giá trị min: max: step nên được kế thừa từ các giá trị chuỗi của bạn nhưng điều này có thể được đặt rõ ràng nếu muốn.
Tiếp theo, bạn cần đảm bảo liên kết từng bộ giá trị chuỗi với thang tỷ lệ thích hợp. Để làm điều này bao gồm thuộc tính "scale": "". Điều này sẽ chấp nhận một chuỗi có hai giá trị được phân cách bằng dấu phẩy. Bạn sẽ muốn khai báo scale-x nào và scale-y nào bạn muốn liên kết với chuỗi.
Hiện tại ZingChart không chấp nhận giá trị trường hợp lạc đà cho scaleY2. Điều này phải được biểu diễn bằng JSON dưới dạng "scale-y-2".
Mã bên dưới sẽ cung cấp cho bạn những gì bạn cần. Tôi đã cung cấp nhận xét về các dòng bạn có thể bị thiếu trong biểu đồ của mình.
Nếu bạn muốn xem ví dụ hoạt động trực tiếp, bạn có thể chạy mã bên dưới.
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>Lưu ý: Tôi đang trên đội ZingChart. Xin vui lòng cho tôi biết nếu bạn có thêm câu hỏi.
Đặt câu hỏi rõ ràng hơn – Rick