如何在 zingcharts-angularjs 中渲染两个 y 轴？

Question

我正在尝试使用 zingcharts-angularjs 指令制作具有双 y 轴的混合图表。

对于双 Y 轴，您遵循“scale-y-2”模式，但它在我的 AngularJS 应用程序中不起作用。有谁知道如何在 zingcharts 中渲染两个 y 轴-angularjs?

Answer 1

在 Angular 指令中向 ZingChart 添加多个 scale-y 与 vanilla JavaScript.

相同

首先，您需要确保在图表中包含一个 "scale-y-2":{} 对象。 min:max:step 值应继承自您的系列值，但如果需要，可以明确设置。

接下来您需要确保将每组系列值关联到适当的 scale-y。为此，请包含一个 "scales":"" 属性。这将接受一个带有两个逗号分隔值的字符串。您需要声明要将哪个 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 团队。如果您还有其他问题，请告诉我。

如何在 zingcharts-angularjs 中渲染两个 y 轴？

How to render two y-axis in zingcharts-angularjs?

charts

angularjs

angularjs-directive

zingchart