HighCharts数据结构-多个独立系列,堆积柱状图

时间:2019-01-29 19:34:41

标签: javascript angular highcharts

我试图创建一个类似于以下内容的图表,但不确定如何配置参数,而对数据结构感到困惑

enter image description here 注释: 每列应独立。它们彼此之间不共享任何数据/系列。列中的数据应包含在其自己的列中。

本质上,我希望在y轴上有五个不同的序列,每个序列将堆叠其数据,而不将数据传递到其他轴。

即:“资产类别”具有股票,ETFS,现金的数据,并且该数据应仅在“资产类别”列中。同样,行业将具有部门级别等数据。

当前,我的输出类似于标准的堆叠条形图

enter image description here

这是我当前的数据结构,我敢肯定需要大修改:

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
        }

我们还讨论了是否可能有一个类别列表,并且仅根据我们选择的列使用这些类别的一部分。任何帮助将不胜感激:)

1 个答案:

答案 0 :(得分: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}
        ]
    }]

要使悬停系列看起来“活跃”,可以对事件updatemouseOver中的序列点使用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