zingchart - 使用 ZingChart 的多维堆叠条形图

Question

我正在尝试使用 ZingChart 创建多维堆叠条形图。据我所知:

由于某种原因，图像没有显示。它的链接是 ( https://drive.google.com/file/d/0B14IyWv9zwZ9a0hWR0lXTDZQXzQ/view )。

在此示例中，每个条形代表一个产品(有 3 个产品)，对于每个条形，我想按地区显示分割(有 4 个地区)。因此，每年最多有 3 个产品栏(针对 3 种产品)，然后每个产品栏最多有 4 种颜色(针对 4 个地区)。

虽然条形图本身是正确的，但图表有几处不正确:

• 如图例所示，每个区域的每种产品都有一种单独的颜色。应该只有 4 种区域颜色，从产品到产品重复使用，但在这种情况下有 12 种区域颜色(3 产品 x 4 区域)
• 我想标记每个条形图以指示每个条形图与哪个产品相关。这可能是 x 轴上年份标签上方的额外标签，或者是显示产品的每个条形上方的标签。

我在 ZingChart 网站上查找了类似的示例，但所有堆叠条形图都是“一维”的。在 Tableau 中，这样的事情很容易做到。

Answer 1

这当然可以使用 ZingChart 来完成。我在下面提供了一张实时图表，其中包含您所在地区和产品的正确设置。我还包括一个显示您的 4 个区域的图例。请注意，图例的交互性已禁用。

关键是在系列项目中使用“堆栈”属性。这样，您可以指定您希望该系列继续进行的堆栈。

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 让图例根据需要正确打开和关闭您的系列。