AnyChart能做出组合图带双坐标轴效果吗
b88380727217
2021.12.29 13:13发布于技术 - 前端与UI
1152

各位大佬好,

       最近由于项目需求,要使用AnyChart做一些图表,同一个图表中要同时有条形和折线,并且条形的值是数量,大概20k的数量级,使用左边的Y轴;折线是一个百分比,需要用另一个Y轴;

       请问一下我上边描述的这种需求可以使用AnyChart实现吗?能不能提供一下实现方式;

 

谢谢

首赞
收藏
0评论
···
2个回答
按时间排序
按点赞排序
    DannyChuang
    2021-12-29 13:51 发布

    可以透过plotly来实现

    以双y轴举例:

    在Layout option可以新增对应plotly的JSON

    其中side可以设定左右

    position可以调整位置

    第2个y轴要设"overlaying":"y"

    {
      "yaxis": {
        "title": "Y-axis 1",
        "zeroline": true,
        "color": "#4682B4",
        "showgrid": true,
        "showline": true,
        "side": "left",
        "position": 0
      },
      "yaxis2": {
        "title": "Y-axis 2",
        "color": "#FF8C00",
        "showgrid": true,
        "showline": true,
        "zeroline": true,
        "overlaying": "y",
        "side": "right"
      }
    }

    想边调整边看效果可以先用Developer模式,在浏览器上调整JSON
    (虽然例子是LineChart但anychart也可以)

    1640756224(1).png

     

    1640756292(1).png

    另外.印象中记得需还要指定一个series对应第二个y轴

    1640756368(1).png

    至于要双图形则是要改Series对应的Type:例如住状图Type:"bar"

    1640756976(1).png

     

     

    Code_Dove
    点赞
    2评论
    举报
    b88380727217
    楼主
    2021-12-29 13:19 发布

    加一个截图方便理解我的需求

    example.png

    首赞
    0评论
    举报