Структура данных 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}
        ]
    }]

Чтобы ряды при наведении выглядели «активными», вы можете использовать метод update для точек серии в mouseOverи mouseOut события:

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