根据返回的数据从 highcharts 循环 xAxis

Question

我有以下数据return来自php：

# Mes, Total, Categoria
2022-05, 1, Bullying (Mobbing, Bossing, Pessoal, Gossip)
2022-05, 1, Preocupação relativas à saúde e segurança
2022-05, 1, Suspeita de Roubo, Corrupção ou Desfalque
2022-04, 1, Suspeita de Roubo, Corrupção ou Desfalque
2022-05, 1, Feedback positivo ou elogio

然后我想用这些数据创建一个图表，此时已经 return 正确处理了大部分数据：

为了 return 我正在使用以下循环的系列：

var series = [];
for (var i = 0; i < data.length; i++) {
  Mes = data[i][0];
  Total = data[i][1];
  Categoria = data[i][2];  

  series.push({
    name: Categoria,
    data: [Total],
    stack: Mes,
    dataLabels: {
      enabled: true,
    }
  });
}

这样 return 如上图所示正确。问题是 xAxis 类别，我无法 return 月份列中存在的两个日期。

我正在尝试这种方式，但它不起作用：

var xAxis = [];
for (var i = 0; i < data.length; i++) {
  Mes = data[i][0];
  Total = data[i][1];
  Categoria = data[i][2];  

  xAxis.push({
    categories: [Mes],
    labels: {
      skew3d: true,
      style: {
        fontSize: '16px'
      }
    }
  });

}

你能帮忙吗？

Answer 1

堆栈选项没有像您在示例中期望的那样引用类别索引。

您使用 stack: 'A' 和 stack: B' 并且每个系列都有一个 y 值。这意味着两个堆叠的列被分组为一个类别。

查看 API 参考及其演示： https://api.highcharts.com/highcharts/series.column.stack

要为每个类别实现堆叠列，您需要将 Mes 解析为数字（时间戳）并将其作为 x 值传递。

var series = [];
for (var i = 0; i < data.length; i++) {
  Mes = new Date(data[i][0]).getTime() + 60 * 60 * 1000,
  Total = data[i][1];
  Categoria = data[i][2];  

  series.push({
    name: Categoria,
    data: [{x: Mes, y: Total}],
    dataLabels: {
      enabled: true,
    }
  });
}

然后将 xAxis.type 设置为 datetime 并更改标签格式。

  xAxis: {
    type: 'datetime',
    labels: {
      format: '{value:%Y-%m}'
    },
  },

示例演示： https://jsfiddle.net/BlackLabel/vuLdezxw/

根据返回的数据从 highcharts 循环 xAxis

Loop in xAxis from highcharts according to returned data

javascript

highcharts