Question

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

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

我有一个函数可以在＆＃39;％＆＃39;中生成形状的初始位置，但是当我更改窗口的大小时它会不对齐。

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

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

Answer 1

不幸的是，ZingChart没有提供基于大小调整来缩放形状和标签的方法。挂钩可用于在节点上定位标签，但不能在缩放项本身上定位。

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

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

（下面的片段将在未来删除jsfiddle。）

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

＆＃13;

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
});

＆＃13;

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

＆＃13;

ZingChart - 作为标签的形状

1 个答案: