zingchart - 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>