ZingChart 单系列条形图组标签



所以我被要求为使用ZingChart构建的条形图添加额外的标签层。我们基本上有一个系列柱形图,用于绘制特定类别的子类别内条件的评级。

目前,子类别在

图表中根本没有作用,因为我绘制了类别中每个条件的评级。如何将条件"分组"在一起,以便标签显示每个条件名称,子类别将标签分组在一起。

此外,我无法使用多系列数据,因为每列都根据其评级/值进行着色,因此根据我的理解,颜色编码的图例毫无意义。

完全披露,我是ZingChart团队的成员。

我有点不确定你到底想要什么,但我已经尝试在这里创建你的图表。

此图表使用自定义令牌,前缀为 data- 。以及我们的值框文本属性。我们将两个自定义令牌添加到我们的系列对象中

    {
        values: [25,42,67,89,15,34,67,85],
        text:'Rating 1', // Standard plot/legend text
        'data-sub-text':['SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1'],
        'data-sub-rating':[1,2,3,4,5,6,7,8]
    }

从这里,我们可以使用工具提示在悬停时访问所有这些值,或者如果我们想始终显示该值,例如标签,则可以使用 valueBox。

plot:{
  valueBox:{
    placement:'top', // Put the valueBox above the bar
    text:'%t: %v <br> %data-sub-text: %data-sub-rating',
    backgroundColor:'#000'
  }
}

var myConfig = {
 	type: "column", 
 	plot:{
 	  barWidth:15,
 	  valueBox:{
 	    placement:'top',
 	    text:'%t: %v <br> %data-sub-text: %data-sub-rating',
 	    backgroundColor:'#000'
 	  }
 	},
	series : [
		{
			values : [25,42,67,89,15,34,67,85],
			text:'Rating 1',
			'data-sub-text':['SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1'],
			'data-sub-rating':[1,2,3,4,5,6,7,8]
		}
	]
};
zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 400, 
	width: 600 
});
<!DOCTYPE html>
<html>
	<head>
	<!--Assets will be injected here on compile. Use the assets button above-->
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
		<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
</script>
	</head>
	<body>
		<div id='myChart'></div>
	</body>
</html>

如果我没有适当地回答您的问题,请告诉我。

相关内容

  • 没有找到相关文章

最新更新