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

在本文中，我们将介绍如何在zingcharts-angularjs中渲染两个y轴。

使用zingcharts-angularjs渲染一个y轴

首先，我们需要在HTML页面中引入zingcharts和zingcharts-angularjs的CDN链接。然后，我们可以在AngularJS控制器中创建一个数据数组，并使用zingchart.draw()方法将数据渲染为一个图表。

<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myCtrl">
<head>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <script src="https://cdn.zingchart.com/angularjs/zingchart-angularjs.js"></script>
</head>
<body>
  <zingchart id="myChart">{{renderOptions}}</zingchart>
</body>
</html>

var app = angular.module("myApp", ["zingchart-angularjs"]);
app.controller("myCtrl", function(scope) {scope.renderOptions = {
    type: "line",
    series: [{"values":[4,5,3,6,2,4,7]}],
    scaleY: {
      lineColor: "#999999",
      tick: {
        lineColor: "#999999"
      },
      guide: {
        lineStyle: "dashed"
      }
    }
  };
});

上面的代码将渲染一个包含一个y轴的折线图。通过修改series对象中的values数组，可以改变图表中显示的数据。

渲染两个y轴

要在zingcharts-angularjs中渲染两个y轴，我们需要在renderOptions对象中添加两个scaleY属性，并在图表的series属性中添加对应的y轴索引值。

$scope.renderOptions = {
  type: "line",
  series: [{"values":[4,5,3,6,2,4,7]}],
  scaleY: [
    {
      lineColor: "#999999",
      tick: {
        lineColor: "#999999"
      },
      guide: {
        lineStyle: "dashed"
      }
    },
    {
      lineColor: "#FF0000",
      tick: {
        lineColor: "#FF0000"
      },
      guide: {
        lineStyle: "dotted"
      }
    }
  ]
};

在上面的代码中，我们添加了一个新的scaleY对象，表示第二个y轴。然后，我们在series属性中使用y轴的索引值来确定每个数据点应该显示在哪一个y轴上。

完整示例代码

下面是一个完整的示例代码，演示了如何在zingcharts-angularjs中渲染两个y轴。

<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myCtrl">
<head>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <script src="https://cdn.zingchart.com/angularjs/zingchart-angularjs.js"></script>
</head>
<body>
  <zingchart id="myChart">{{renderOptions}}</zingchart>

  <script>
    var app = angular.module("myApp", ["zingchart-angularjs"]);
    app.controller("myCtrl", function(scope) {scope.renderOptions = {
        type: "line",
        series: [
          {
            "values": [4, 5, 3, 6, 2, 4, 7],
            "scales": "scale-x,scale-y-1"
          },
          {
            "values": [2, 3, 1, 4, 1, 3, 5],
            "scales": "scale-x,scale-y-2"
          }
        ],
        scaleX: {
          labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
        },
        scaleY: [
          {
            "line-color": "#999999",
            "tick": {
              "line-color": "#999999"
            },
            "guide": {
              "line-style": "dashed"
            }
          },
          {
            "line-color": "#FF0000",
            "tick": {
              "line-color": "#FF0000"
            },
            "guide": {
              "line-style": "dotted"
            }
          }
        ]
      };
    });
  </script>
</body>
</html>