私は、zingcharts-angularjsディレクティブを使用して、デュアルy軸と混在したチャートを作成しようとしています。zingcharts-angularjsで2つのy軸をレンダリングするには？
デュアルY軸の場合、「scale-y-2」パターンに従いますが、AngularJSアプリケーションでは機能しませんでした。誰もがzingcharts-angularjsで2つのy軸をレンダリングする方法を知っていますか？
AngularディレクティブでZingChartに複数のscale-yを追加することは、javilla JavaScriptと同じです。
まず、 "scale-y-2"：{}オブジェクトをチャートに含めたいと思うでしょう。 min：max：ステップ値は系列の値から継承する必要がありますが、必要に応じて明示的に設定することができます。
次に、一連の値のそれぞれを適切なスケールyに関連付ける必要があります。これを行うには、 "scales"： ""属性を含めます。これは、コンマで区切られた2つの値を持つ文字列を受け入れます。系列に関連付ける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チームにしています。ご不明な点がございましたらお知らせください。
質問が明確になりました – Rick