ZingChart

Question

我需要在我的图表上添加一些额外的标签，所以我使用了形状。这是结果： http://jsfiddle.net/z3n3qobm/91/

但我需要将示例中的圆与 X 轴的标签对齐。图表必须是响应式的，标签总数取决于数据库。

我有一个函数可以生成“%”中形状的初始位置，但是当我更改 window 的大小时它会错位。

我做了一些计算，但是当图表调整大小时它并没有保持固定的比例。

有人知道如何在 X 轴标签的相同位置使用形状吗？

Answer 1

遗憾的是，ZingChart 不提供根据大小调整形状和标签的方法。挂钩可用于在节点上放置标签，但不能用于缩放项目本身。

现在我确实有解决您的问题的方法，但需要明确的是，这更多是利用 ZingChart 和多个图表的技巧进行黑客攻击。我删除了您图表中的形状，并决定使用第二张图表复制这些圆圈。这样做的主要目标是利用散点图，修改每个散点节点的外观以复制您想要实现的目标，并隐藏所有不必要的表面项目（比例、删除的 plotarea 边距）。请注意，我使用的是混合图表，一个系列用于散点图，另一个系列用于虚拟条形图，以强制比例与上面图表的显示方式相匹配。

http://jsfiddle.net/mikeschultz/q6arebsu/1/

（下面的片段以防将来删除 jsfiddle）。

这也可以通过将两个图表组合成一个图形集来实现，但我发现使用单独的图表更灵活。

var myData = {
"graphset":[
    {
        "globals":{
            "overflow":"visible"
        },
        "plot":{
            "animation":{
                "effect":"ANIMATION_EXPAND_BOTTOM",
                "sequence":null,
                "speed":10
            },
            "aspect":"jumped"
        },
        "plotarea": {
          "margin-bottom": 30
        },
        "type":"mixed",
        "series":[
            {
                "type":"bar",
                "values":[46,46,53,50],
                "background-color":"#5e36e6",
                "value-box":{
                    "placement":"bottom-in",
                    "rules":[
                        {
                            "rule":"%v==0",
                            "visible":false
                        }
                    ],
                    "thousands-separator":".",
                    "font-color":"#fff"
                },
                "palette":0
            },
            {
                "type":"bar",
                "values":[52,53,61,58],
                "background-color":"#0099cd",
                "value-box":{
                    "placement":"top",
                    "rules":[
                        {
                            "rule":"%v==0",
                            "visible":false
                        }
                    ],
                    "thousands-separator":".",
                    "font-color":"#fff"
                },
                "palette":1
            },
            {
                "type":"line",
                "values":[150,105,399,159],
                "marker":{
                    "size":0,
                    "border-width":0,
                    "background-color":"transparent"
                },
                "line-color":"#99cc33",
                "line-width":3,
                "value-box":{
                    "placement":"top",
                    "rules":[
                        {
                            "rule":"%v==0",
                            "visible":false
                        }
                    ],
                    "thousands-separator":"."
                },
                "palette":2
            }
        ],
        "background-color":"#3F0767",
        "scale-x":{
            "tick":{
                "alpha":0
            },
            "zooming":false,
            "labels":["AB","CDE","FG","HI JKL"],
            "line-width":0,
            "zoom-to":null
        },
        "scale-y":{
            "guide":{
                "alpha":0.25,
                "line-style":"solid",
                "line-color":"#5a3b77"
            },
            "short":true,
            "tick":{
                "alpha":0
            },
            "line-width":0
        },
        "scroll-x":false
    },
]
};

zingchart.render({ 
 id : 'myChart', 
 data : myData, 
 height: 400
});

var bubbleConfig = {
  type: 'mixed',
  backgroundColor:"#3F0767",
  scaleX: {
    visible: false
  },
  scaleY: {
    visible: false
  },
  plotarea: {
    marginTop : 0,
    marginBottom: 0,
    maskTolerance: [0,0]
  },
  plot: {
    marker: {
      size: 30,
      borderColor: '#371876',
      borderWidth: 3,
      backgroundColor: 'transparent'
    },
    tooltip: {
      visible: false
    }
  },
  scaleY: {
    values: "0:2:1",
    visible: false
  },
  series: [
    {
      type:'scatter',
      values: [
        [0,1],
        [1,1],
        [2,1],
        [3,1]
      ],
      valueBox: {
        visible: true,
        text: 'foobar',
        fontColor: '#fff',
        fontSize: '15px',
        fontWeight: 'normal',
        placement: 'over',
        rules: [
          {
            rule: '%i == 0',
            text: '35%'
          },
          {
            rule: '%i == 1',
            text: '51%'
          },
          {
            rule: '%i == 2',
            text: '15%'
          },
          {
            rule: '%i == 3',
            text: '36%'
          }
        ]
      }
    },
        {
      type:'bar',
      values: []
    }
  ]
}
zingchart.render({ 
 id : 'myBubbles', 
 data : bubbleConfig, 
 height: 80
});

<html>
  <head>
    <script src="http://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>
    <div id="myChart"></div>
    <div id='myBubbles'></div>
  </body>
</html>

ZingChart - 形状作为标签

ZingChart - Shapes as Labels