ZingChart -形状作为标签

Question

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

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

我有一个函数，它在'%‘中生成形状的初始位置，但是当我改变窗口的大小时，它会不对齐。

我做了一些计算，但当图表调整大小时，它不会保持一个固定的比例。

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

Answer 1

不幸的是，ZingChart没有提供一种方法来根据大小缩放形状和标签。钩子可以在节点上定位标签，但不能在缩放项本身上定位标签。

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

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>

​