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

enyaitl3  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(187)

我有从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

然后用这些数据创建一个图形,此时该图形已经正确返回了大部分数据:

为了返回序列,我使用了以下循环:

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,
    }
  });
}

这样它就能正确地返回,如上图所示。问题是xAxis类别,我无法返回月份列中存在的两个日期。
我试过了,但没用:

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'
      }
    }
  });

}

你能帮忙吗?

ktecyv1j

ktecyv1j1#

stack 选项 并 没有 像 您 在 示例 中 所 期望 的 那样 引用 类别 索引 。
您 使用 堆栈 :' A ' 和 堆栈 :B ' , 每个 数列 都 有 一 个 y 值 。 这 表示 两 个 堆栈 直 条 会 组成 一 个 类别 目录 。

要 获得 每个 类别 的 堆叠 列 , 您 需要 将 * 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/ 格式

相关问题