JSON中的Highcharts堆积柱形图没有绘制正确的值

Posted 2023-05-08

【中文标题】JSON中的Highcharts堆积柱形图没有绘制正确的值

【英文标题】：Highcharts Stacked Column chart from JSON not charting correct values

【发布时间】：2020-08-22 07:41:51

【问题描述】：

我正在尝试绘制堆积柱形图，但我得到的结果与 JSON 数据不匹配。

我有 3 个类别，但图表似乎没有出现在最后一个类别中。

为什么会这样？

我的代码：

let cat = [];
vals = json.map(val => 
            return val.type;
        );
console.log(vals);
vals.forEach(v=>
if (cat.indexOf(v) === -1) cat.push(v);
);
console.log(cat);

const group_data = (array, key) => 
    return array.reduce((a, c) => 
        (a[c[key]] = a[c[key]] || []).push(c);
        return a;
    , );


const get_grouped = group_data(json, 'date');
console.log(get_grouped);

for (a in get_grouped) 
            cat.forEach(t => 
                if (!get_grouped[a].some(v => v.type == t)) 
                    get_grouped[a].push(
        "date": get_grouped[a][0].date,
        "metric": 0,
        "type": t
      );
    
  )

console.log(get_grouped);
        let series = Object.entries(get_grouped).map(([key, group]) => (
            ['name']: key,
            ['data']: group.map(entry => entry['metric']),
            ['marker']: 
                symbol: 'circle'
            
        ));
console.log(series);

Highcharts.chart('container', 
    chart: 
      type: 'column'
    ,
    title: 
      text: 'Stacked column chart'
    ,
    xAxis: 
      categories: cat
    ,
    legend: 
      align: 'right',
      x: -30,
      verticalAlign: 'top',
      y: 25,
      floating: true,
      backgroundColor:
      Highcharts.defaultOptions.legend.backgroundColor || 'white',
      borderColor: '#CCC',
      borderWidth: 1,
      shadow: false
    ,
    tooltip: 
      headerFormat: '<b>point.x</b><br/>',
      pointFormat: 'series.name: point.y<br/>Total: point.stackTotal'
    ,
    plotOptions: 
      column: 
        stacking: 'normal'
      
    ,
    series: series
); 

这是我的小提琴：https://jsfiddle.net/noob0605/1y58t3fn/22/

据我所知，这是因为订单类别和数据不匹配。我该如何解决？

【参考方案1】：

你是对的，问题是类别的顺序与get_grouped对象中的数据顺序不匹配。您可以通过向for (a in get_grouped) 循环添加排序（使每个数组中的对象顺序与cat 中的顺序匹配）来解决此问题：

for (a in get_grouped) 
            cat.forEach(t => 
                if (!get_grouped[a].some(v => v.type == t)) 
                    get_grouped[a].push(
        "date": get_grouped[a][0].date,
        "metric": 0,
        "type": t
      );
    
  );
  get_grouped[a].sort((a, b) => cat.indexOf(a.type)-cat.indexOf(b.type));

【讨论】：

如果cat 是一个 ISO 日期数组，我如何使用 moment js 对其进行排序？

@noob 抱歉，我没能帮你解决这个问题——这里已经是晚上了。很高兴看到您用一个新问题解决了这个问题。

感谢您回复我。但它仍然无法正常工作。它正在对值进行排序，例如：[3, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 等等

我不确定您指的是什么？也许是时候再问一个问题了？

我刚刚创建了一个：***.com/questions/61670437/…

【参考方案2】：

不使用推送，而是使用拼接来设置特定类别索引处的数据。

 for (a in get_grouped) 
  cat.forEach((t, index) => 
    if (!get_grouped[a].some(v => v.type == t)) 
      const obj = 
        "date": get_grouped[a][0].date,
        "metric": 0,
        "type": t
      
      get_grouped[a].splice(index, 0, obj);
    
  )

更新小提琴 https://jsfiddle.net/technochamp/wj82bk60/1/