highCharts 中的分组案例

Question

在我的 angularJS 应用程序中，我的数据如下所示： 对于一年中的每个月，我都有这个： 一月： 2023 2024 资产 1 5 6 资产 2 4 7 资产 3 5 6

二月： 2023 2024 资产 1 3 1 资产 2 6 2 资产 3 7 5

....

（如果需要的话我当然可以改变结构）

现在，我想创建一个图表来帮助我的用户@debug@他们的值，所以我想为每个月显示2个条形图，一个用于去年，一个用于今年。每个条形都是许多资产的堆栈。

所以 X 轴应该是月份，每个月份应该是 2 年。 并且在标签中每个资产只能出现一次。 （不要创建同一资产的 2 个副本，一个用于今年，一个用于另一年，因为用户可能只想隔离一项资产）。

我尝试使用“分组依据”选项，但没有成功。

Answer 1

这需要一些定制。

首先，我建议使用分组类别插件。

<script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>

此外，自定义解析也是必要的。我准备了一个你可以参考的例子：

let monthlyData = {
  'JAN': {
    '2023': {
      'Asset 1': 5,
      'Asset 4': 4,
      'Asset 5': 5,
    },
    '2024': {
      'Asset 2': 6,
      'Asset 3': 7,
      'Asset 7': 6,
    }
  },
  'FEB': {
    '2023': {
      'Asset 6': 3,
      'Asset 2': 6,
      'Asset 3': 7,
    },
    '2024': {
      'Asset 2': 1,
      'Asset 3': 2,
      'Asset 4': 5,
    }
  },
};

// Categories
const categories = Object.keys(monthlyData).map(month => {
  return {
    name: month,
    categories: Object.keys(monthlyData[month])
  };
});

// Assets
let assets = new Set();
Object.values(monthlyData).forEach(month => {
  Object.values(month).forEach(year => {
    Object.keys(year).forEach(asset => {
      assets.add(asset);
    });
  });
});
assets = [...assets];

// Series
const series = assets.map(asset => {
  const data = [];

  categories.forEach(category => {
    category.categories.forEach(subcategory => {
      const monthData = monthlyData[category.name][subcategory] || {};
      const value = monthData[asset] || 0;
      data.push(value);
    });
  });

  const seriesObject = {
    name: asset,
    data
  };
  return seriesObject;
});

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: ''
  },
  xAxis: {
    categories: categories,
    crosshair: true,
    tickWidth: 0,
    labels: {
      groupedOptions: [{
        style: {
          visibility: 'visible',
          fontSize: '12px',
        },
      }],
    },
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Value'
    }
  },
  tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: false
      }
    }
  },
  series: series
});

演示： https://jsfiddle.net/BlackLabel/z1d9s7o3/

API参考： https://blacklabel.github.io/grouped_categories/