使用Highcharts和Angular创建动态柱形图以可视化对象数据

omqzjyyz 于 2023-06-06 发布在 Highcharts

关注(0)|答案(2)|浏览(166)

我有这个是json的回应

{
    "dates": [
        "2023-05-01",
        "2023-05-02",
        "2023-05-03",
        "2023-05-04",
        "2023-05-05"
    ],
    "values": [
        {},
        {},
        {
            "Apple": 454,
            "SIM-Free, Model A19211 6.5-inch Super": 191,
            "Samsung's new variant which goes beyond": 3
        },
        {
            "OPPO F19 is officially announced on April": 4980,
            "Huawei’s re-badged P30 Pro New Edition": 41424,
            "MacBook Pro 2021 with mini-LED display": 2535,
            "Basic Data": 293,
            "Samsung Galaxy Book S (2020)": 1181,
            "Style and speed. Stand out on HD video calls": 378, 
        },

       {}
       
    ],
}

我想要这样：

你能告诉我如何绑定对象到列。目前我是这样做的：

public createChart(container, options, chartName = null) {
        const chartOptions = this.getOptions();
        const chartData = [];
    
        options.forEach((data) => {
          const chartDataObject = {
            name: [],
            data: [],
            color: '',
            fillColor: {}
          };

          
          chartDataObject.name = Object.keys(data.values)
          .filter((key) => Object.keys(data.values[key]).length !== 0) // Filter out empty objects
          .map((key) => key); // Extract the names
        chartDataObject.data = Object.values(data.values)
          .filter((value) => Object.keys(value).length !== 0) // Filter out empty objects
          .map((value) => (value ? Object.values(value)[0] : 0)); // Extract the names
          chartDataObject.color = data.color;
          chartDataObject.fillColor = {
            linearGradient: [0, 0, 0, 150],
            stops: [
              [0, data.color],
              [1, Highcharts.color(data.color).setOpacity(0).get('rgba')]
            ]
          };
          chartOptions.xAxis.categories = data.dates;
          console.log(chartDataObject);
          chartData.push(chartDataObject);
        });
        chartOptions.series = chartData;
    
        const element = document.createElement('div');
        container.appendChild(element);
        chartOptions.chart['renderTo'] = element;
    
        this.chart = new Highcharts.Chart(chartOptions);
        return this.chart;
      }

我正在尝试创建柱形图xAxis显示所有数据yAxis显示对象我们有名称和值如果对象为空bind 0如果对象在那里我需要绑定

highcharts

来源：https://stackoverflow.com/questions/76355100/creating-a-dynamic-column-chart-with-highcharts-and-angular-to-visualize-object

2条答案

按热度按时间

14ifxucb1#

您需要创建一个x轴为类别的堆叠柱形图。最重要的是使您的数据适应Highcharts所需的系列结构。你可以用下面的方式来实现：

const series = [];

repsonse.values.forEach((values, xVal) => {
  Object.keys(values).forEach((key, index) => {
    if (!series[index]) {
      series.push({
        data: []
      });
    }
    series[index].data.push({
      name: key,
      x: xVal,
      y: values[key]
    });
  });
});

Highcharts.chart('container', {
  ...,
  series,
  xAxis: {
    categories: repsonse.dates,
    min: 0,
    max: repsonse.dates.length - 1
  }
});

现场演示：http://jsfiddle.net/BlackLabel/mdv6rp2L/
API引用：https://api.highcharts.com/highcharts/series.column.data

赞(0）回复(0）举报 2023-06-06

lqfhib0f2#

不确定container和options的值是什么，但根据您当前的代码，这应该可以解决问题。
正如@ppotaczek的回答中提到的，您需要在结构中提供值，以便HighCharts能够正确呈现图表。
在下面代码的总结中，

keys-从data.values数组中的对象中提取所有属性名称。
series-从keys数组转换为包含具有name和value属性的每个系列数据的对象数组。如果data.values数组中的对象不包含属性（key），则将value默认为0。
categories- Categories是x轴的标签，应该使用data.dates作为值。

createChart(container: any, options: any[], chartName = null) {
  const chartOptions = this.getOptions();

  const chartData: any = [];

  const keys = this.data.values
    .map((x: any) => Object.keys(x))
    .reduce((acc: any[], cur: any[]) => [...acc, ...cur], [] as any[]);

  chartOptions.series = keys.map(
    (key: any) =>
      ({
        name: key,
        data: this.data.values.map((y: any) => y[key] ?? 0),
        //color: /* Your color value */,
        //fillColor: /* Your fillColor setting object */,
        } as any)
    );

  (<AxisOptions>chartOptions.xAxis)!.categories = Array.from(this.data.dates);

  const element = document.createElement('div');
  container.appendChild(element);
  chartOptions.chart!['renderTo'] = element;

  this.chart = new Highcharts.Chart(chartOptions);
  return this.chart;
}

Demo @ StackBlitz

赞(0）回复(0）举报 2023-06-06

我来回答

使用Highcharts和Angular创建动态柱形图以可视化对象数据

2条答案

相关问题

热门标签

最新问答