ZingChart 单系列条形图组标签答案

【问题标题】：ZingChart single series bar chart group labelsZingChart 单系列条形图组标签
【发布时间】：2016-07-12 08:50:33
【问题描述】：

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

目前，子类别在图表中根本不发挥作用，因为我绘制了类别中每个标准的评分。如何将标准“分组”在一起，以便标签显示每个标准名称，子类别将标签分组在一起。

我也不能使用多系列数据，因为每列都根据其评级/值着色，所以我理解颜色编码的图例将毫无意义。

【问题讨论】：

标签： charts zingchart

【解决方案1】：

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

我有点不确定您到底想要什么，但我已尝试创建您的图表 here。

此图表使用自定义tokens，前缀为data-。以及我们的valueBox 文本属性。我们将两个自定义标记添加到我们的系列对象中

    {
        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]
    }

从这里我们可以在悬停时使用tooltips 访问所有这些值，或者如果我们想始终显示该值，例如标签，我们可以使用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>

如果我没有正确回答您的问题，请告诉我。

【讨论】：

谢谢@nardecky，顺便说一句，很棒的图书馆。不完全是我的想法。这是我快速绘制的图片来说明我要求构建的内容：drive.google.com/file/d/0B_dtw2ENIC_ldnBxblVBb2hYTkk/…
我使用上面类似的技术创建了一个新的demo。我建议使用 valueBox 和/或工具提示以及 x 轴标签上的子类别来实施标准。这是最流畅的阅读 IMO。图像的约束将是绘制线条以对条形进行分组。你可以这样做，但图表不会响应，所以我避免了这种方法。如果这是客户必须拥有的，我也可以为此创建一个演示。