3

我正在尝试使用 ZingChart 创建一个多维堆叠条形图。据我所知，这是：

堆积条形图

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

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

虽然条形本身是正确的，但图表有一些事情没有正确执行：

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

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

4

1 回答 1

4

这当然可以使用 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 让图例根据需要正确打开和关闭您的系列。

于 2015-01-02T16:35:37.500 回答