HighCharts數據結構-多個獨立系列，堆積柱狀圖

Question

我正在嘗試創建類似於以下內容的圖表，但不確定如何配置參數，而對數據結構感到困惑

注意：每列應獨立。 它們彼此之間不共享任何數據/系列。 列中的數據應包含在其自己的列中。

本質上，我想在y軸上有五個不同的序列，每個序列將堆疊其數據，而不是將數據傳遞到其他軸。

即：“資產類別”具有股票，ETFS，現金的數據，並且該數據應僅在“資產類別”列中。 同樣，行業將具有部門級別等數據。

目前，我的輸出類似於標准的堆疊條形圖布局

這是我當前的數據結構，我敢肯定需要進行大的修改：

categories: ["", "Utilities", "Energy", "Funds", "Financial", "Consumer, Cyclical", "Consumer, Non-cyclical", "Communications", "Basic Materials", "Industrial", "Technology", "Other", "Government"]

series: [
 {name: "Cash", data: Array(13)},
 {name: "Equity", data: Array(13)},
 {name: "Fixed Income", data: Array(13)},
 {name: "Fund", data: Array(13)}
]

我的圖表代碼（如果需要）：

this.options = {
          chart: {
            type: 'column',
            height: 500,
            style: {
              fontFamily: "Arial"
            }
          },
          title: {
            text: ""
          },
          xAxis: {
            categories: categories,
            labels: {
              style: {
                fontSize: "14px"
              }
            }
          },
          yAxis: {
            min: 0,
            title: {
              text: ""
            },
            labels: {
              formatter: function () {
                let valueString = (
                  this.value > 999.99 && this.value <= 999999.99 ?
                    "$" + (this.value / 1000).toFixed(0) + "K" : this.value > 999999.99 ?
                      "$" + (this.value / 1000000).toFixed(1) + "M" : this.value
                )
                return valueString
              },
              style: {
                fontSize: "14px",
              }
            }

          },
          legend: {
            align: 'right',
            verticalAlign: 'top',
            layout: "vertical",
            x: 0,
            y: 50,
            itemStyle: {
              fontSize: "16px",
              color: "#6c6c6c",
            },
            symbolPadding: 8,
            itemMarginTop: 10,
            shadow: false,
            labelFormatter: function () {
              return `${this.name}`
            }
          },
          tooltip: {
            formatter: function () {
              let name = this.series.name
              let value = this.y
              let valueString = `$${value.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`
              let total = this.point.stackTotal
              let percentage = ((value / total) * 100).toFixed(2)
              let percentageString = `(${percentage})%`

              return `<b>${name}</b> <br> ${valueString} ${percentageString}`
            },
            style: {
              fontSize: "14px",
            },
            backgroundColor: "#ffffff"
          },
          plotOptions: {
            column: {
              stacking: 'normal',
              dataLabels: {
                enabled: false
              }
            },
            series: {
              borderColor: "rgba(0, 0, 0, 0)"
            }
          },
          series: series
        }

我們還討論了是否可能有一個類別列表，並且僅根據我們選擇的列使用這些類別的一部分。 任何幫助將不勝感激 ：）

Answer 1

相對於描述，您的系列結構應如下所示：

series = [{
        name: "Cash",
        data: [
            {x: 0, y: 5},
            {x: 0, y: 2},
            {x: 0, y: 4}
        ]
    }, {
        name: "Equity",
        data: [
            {x: 1, y: 4},
            {x: 1, y: 3},
            {x: 1, y: 4}
        ]
    }, {
        name: "Fixed Income",
        data: [
            {x: 2, y: 4},
            {x: 2, y: 5},
            {x: 2, y: 2}
        ]
    }]

為了使懸停系列看起來“活躍”，可以對mouseOver和mouseOut事件中的系列點使用update方法：

var categories = ["Utilities", "Energy", "Funds"],
    colors = ['red', 'green', 'blue'],
    series = [...],
    i = 0,
    newCategories,
    chartCategories = [];

for (; i < series.length; i++) {
    chartCategories.push('');
}

Highcharts.chart('container', {
    ...,
    plotOptions: {
        column: {
            ...,
            events: {
                mouseOver: function() {
                    this.points.forEach(function(p, i) {
                        p.update({
                            color: colors[i]
                        });
                    }, this);

                    newCategories = chartCategories.slice();

                    newCategories.splice(
                        this.index, 1, categories[this.index]
                    );

                    this.xAxis.setCategories(
                        newCategories
                    );
                },
                mouseOut: function() {
                    this.points.forEach(function(p) {
                        p.update({
                            color: ''
                        });
                    }, this);

                    this.xAxis.setCategories(
                        chartCategories
                    );
                }
            }
        }
    }
});

現場演示： http ： //jsfiddle.net/BlackLabel/Ljfqe0ts/

API參考： https ： //api.highcharts.com/highcharts/series.column.events