Him*_*oel 6 charts angularjs angularjs-directive zingchart
我正在尝试使用zingcharts-angularjs指令制作具有双y轴的混合图表.
对于双Y轴,您遵循'scale-y-2'模式,但它在我的AngularJS应用程序中不起作用.有谁知道如何在zingcharts-angularjs中渲染两个y轴？
小智 8
在Angular指令中向ZingChart添加多个scale-y与使用vanilla JavaScript相同.
首先,您需要确保在图表中包含"scale-y-2":{}对象.min:max:step值应该从您的系列值继承,但如果需要,可以显式设置.
接下来,您需要确保将每组系列值与适当的比例y相关联.要做到这一点,包括"scale":""属性.这将接受带有两个逗号分隔值的字符串.您需要声明要与系列关联的scale-x和scale-y.
目前ZingChart不接受scaleY2的驼峰值.这必须在JSON中表示为"scale-y-2".
下面的代码应该为您提供所需的信息.我已经提供了关于图表中可能缺少的行的注释.
如果您想查看实时工作示例,可以运行以下代码.
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>注意:我在ZingChart团队.如果您有其他问题,请告诉我.
| 归档时间： |
|
| 查看次数： |
505 次 |
| 最近记录： |