Multi-Dimensional Stacked Bar Chart with ZingChart

问题:

I am trying to create a multi-dimensional, stacked bar chart using ZingChart. This is as far as I have gotten:

For some reason, the image is not showing. The link to it is (https://drive.google.com/file/d/0B14IyWv9zwZ9a0hWR0lXTDZQXzQ/view) .

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:

• As the legend shows, each Region gets a separate color for each product. There should only be 4 region colors, which are reused from product to product, but in this case there are 12 region colors (3 products x 4 regions)
• I want to label each bar to indicate which Product each one relates to. That could be an extra label above the year label on the x-axis, or a label above each bar showing the product.

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.

回答1:

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>

I'm on the ZingChart team, so please feel free and contact [e-mail] and we can help you use our API to get the legend to properly turn on and off your series as needed.