gpt4 book ai didi

charts - ZingChart 单系列条形图组标签

转载 作者:行者123 更新时间:2023-12-04 19:40:48 25 4
gpt4 key购买 nike

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

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

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

最佳答案

完全公开,我是 ZingChart 团队的成员。

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

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

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


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

关于charts - ZingChart 单系列条形图组标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38324079/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com