Angular的图表库，带有两个Y轴

Question

有没有适用于Angular的库，可以在同一张图上绘制两个Y轴（例如左侧和右侧）？我尝试了chinmaymk和jtblin的库，但没有找到合适的方法。谢谢。

- ivan.koval

Answer 1

var chartData = {
            "type":"mixed",
            "title":{
                "text":"Multiple Y Axis"
            },
            "scale-x":{
                
            },
            "scale-y":{
                "values":"0:50:5"
            },
            "scale-y-2":{
                "values":"0:40000:5000",
                "guide":{
                    "visible":false
                }
            },
            "series":[
                {
                    "values":[8,31,12,40,24,20,16,40,9],
                    "type":"bar",
                    "scales":"scale-x,scale-y",
                    "hover-state":{
                        "visible":false
                    }
                },
                {
                    "values":[11254,26145,17014,2444,17871,25658,34002,26178,20413],
                    "type":"line",
                    "scales":"scale-x,scale-y-2"
                }
            ]
        };

zingchart.render({
  id: "chart",
  data: chartData,
  width: "100%"
 });

#chart {
  width: 100%;  
}

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id="chart"></div>

ZingChart支持使用scale-y-n对象来实现多个y轴。此外，Github上还有一个易于使用的Angular指令。

示例中有一个简单的演示，这里是更真实的示例。您可以右键单击图表本身，然后选择“查看源代码”以查看JSON。

如果您对实现有任何疑问，请随时联系我，我是ZC团队成员。

- Jailbot

---

你能否看一下我的问题，也许你有想法。https://dev59.com/45ffa4cB1Zd3GeqP3BpQ - Abderrahim

Answer 2

我发现了一个可以解决我的问题的n3-charts库。

- ivan.koval