带有ZingChart的多维堆积条形图 [英] Multi-Dimensional Stacked Bar Chart with ZingChart
问题描述
我正在尝试使用ZingChart创建多维的堆叠条形图.据我所知:
I am trying to create a multi-dimensional, stacked bar chart using ZingChart. This is as far as I have gotten:
由于某些原因，图像未显示.指向它的链接是( https://drive.google.com/file/d/0B14IyWv9zwZ9a0hWR0lXTDZQXzQ/view ).
For some reason, the image is not showing. The link to it is (https://drive.google.com/file/d/0B14IyWv9zwZ9a0hWR0lXTDZQXzQ/view) .
在此示例中，每个条形表示一个产品(有3个产品)，并且我想为每个条形按区域显示细分(有4个区域).因此，每年最多会有3个产品栏(对于3个产品)，然后每个产品栏最多有4种颜色(对于4个区域).
In this example, each bar represents a Product (there are 3 products), and for each bar I want to show the breakdown by Region (there are 4 regions). Therefore, for each year there would be up to 3 product bars (for the 3 products), then for each product bar up to 4 colors (for the 4 regions).
虽然条形图本身是正确的，但图表在某些方面却无法正常运行:
While the bars themselves are correct, there are a few things the chart is not doing properly:
- 如图例所示，每个地区为每种产品获得单独的颜色.只能有4种区域颜色，可以在产品之间重复使用，但是在这种情况下，有12种区域颜色(3种产品x 4个区域)
- 我想在每个栏上贴上标签，以表明每个栏与哪个产品相关.这可以是x轴上年份标签上方的额外标签，也可以是显示产品的每个条形上方的标签.
我在ZingChart网站上寻找了类似的示例，但是所有堆叠的条形图都是一"维的.在Tableau中，这样的操作非常容易.
I looked for similar examples on the ZingChart web site, but all of the stacked bar charts were "one" dimensional. In Tableau, something like this would be very easy to do.
推荐答案
这当然可以使用ZingChart完成.我在下面提供了一个实时图表，该图表可以正确显示您的区域和产品.我还包括一个说明您的4个地区的图例.请注意，图例的交互性已禁用.
This certainly can be done using ZingChart. I have included a live chart below that has your regions and your products setup correctly. I have also included a legend which shows your 4 regions. Please note, the interactivity for the legend is disabled.
键是在系列项目中使用堆栈"属性.这样，您可以指定要继续进行该系列操作的堆栈.
The key is using the "stack" attribute within a series item. That way, you can specify which stack you would like the series to go on.
var myChart = {
"graphset":
[
{
"type":"bar",
"title":{
"text":"Acme Product Sales"
},
"plotarea":{
},
"scaleX":{
"values":["2000","2001","2002","2003","2004"]
},
"scaleY":{
},
"plot":{
"stacked":true,
"adjust-layout":true
},
"legend":{
"toggle-action":"none",
"adjust-layout":true
},
"series":[
{
"values":[10,20,30,40,50],
"legend-text":"North 1",
"stack":1,
"background-color":"red"
},
{
"values":[10,20,30,40,50],
"legend-text":"South 1",
"stack":1,
"background-color":"blue"
},
{
"values":[10,20,30,40,50],
"legend-text":"East 1",
"stack":1,
"background-color":"green"
},
{
"values":[10,20,30,40,50],
"legend-text":"West 1",
"stack":1,
"background-color":"yellow",
"value-box":{
"text":"P 1",
"color":"black"
}
},
{
"values":[10,15,20,25,30],
"legend-text":"North 2",
"stack":2,
"background-color":"red",
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[10,15,20,25,30],
"legend-text":"South 2",
"stack":2,
"background-color":"blue",
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[10,15,20,25,30],
"legend-text":"East 2",
"stack":2,
"background-color":"green",
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[10,15,20,25,30],
"legend-text":"West 2",
"stack":2,
"background-color":"yellow",
"value-box":{
"text":"P 2",
"color":"black"
},
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[15,30,45,60,75],
"legend-text":"North 3",
"stack":3,
"background-color":"red",
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[15,30,45,60,75],
"legend-text":"South 3",
"stack":3,
"background-color":"blue",
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[15,30,45,60,75],
"legend-text":"East 3",
"stack":3,
"background-color":"green",
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
},
{
"values":[15,30,45,60,75],
"legend-text":"West 3",
"stack":3,
"background-color":"yellow",
"value-box":{
"text":"P 3",
"color":"black"
},
"legend-marker":{
"visible":0
},
"legend-item":{
"visible":0
}
}
]
}
]
};
zingchart.render({
id: "myChart",
height: "300px",
width: "100%",
data: myChart
});
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChart"></div>
我正在ZingChart团队工作，请随时与我们联系，联系support@zingchart.com，我们可以帮助您使用我们的API来获取图例，以便根据需要正确打开和关闭您的系列.
I'm on the ZingChart team, so please feel free and contact support@zingchart.com and we can help you use our API to get the legend to properly turn on and off your series as needed.
这篇关于带有ZingChart的多维堆积条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
