使用Highcharts和Angular创建动态列图，以可视化对象数据。

huangapple
go评论116阅读模式
英文:

Creating a dynamic column chart with Highcharts and Angular to visualize object data

问题

我有这个JSON响应：

  1. {
  2.     "dates": [
  3.         "2023-05-01",
  4.         "2023-05-02",
  5.         "2023-05-03",
  6.         "2023-05-04",
  7.         "2023-05-05"
  8.     ],
  9.     "values": [
  10.         {},
  11.         {},
  12.         {
  13.             "Apple": 454,
  14.             "SIM-Free, Model A19211 6.5-inch Super": 191,
  15.             "Samsung's new variant which goes beyond": 3
  16.         },
  17.         {
  18.             "OPPO F19 is officially announced on April": 4980,
  19.             "Huawei’s re-badged P30 Pro New Edition": 41424,
  20.             "MacBook Pro 2021 with mini-LED display": 2535,
  21.             "Basic Data": 293,
  22.             "Samsung Galaxy Book S (2020)": 1181,
  23.             "Style and speed. Stand out on HD video calls": 378
  24.         },
  25.         {}
  26.     ]
  27. }

我想要像这样：

使用Highcharts和Angular创建动态列图，以可视化对象数据。

你可以帮我将对象绑定到列吗？目前我是这样做的：

  1. public createChart(container, options, chartName = null) {
  2.     const chartOptions = this.getOptions();
  3.     const chartData = [];
  5.     options.forEach((data) => {
  6.         const chartDataObject = {
  7.             name: [],
  8.             data: [],
  9.             color: '',
  10.             fillColor: {}
  11.         };
  13.         chartDataObject.name = Object.keys(data.values)
  14.             .filter((key) => Object.keys(data.values[key]).length !== 0) // 过滤掉空对象
  15.             .map((key) => key); // 提取名称
  16.         chartDataObject.data = Object.values(data.values)
  17.             .filter((value) => Object.keys(value).length !== 0) // 过滤掉空对象
  18.             .map((value) => (value ? Object.values(value)[0] : 0)); // 提取数值
  19.         chartDataObject.color = data.color;
  20.         chartDataObject.fillColor = {
  21.             linearGradient: [0, 0, 0, 150],
  22.             stops: [
  23.                 [0, data.color],
  24.                 [1, Highcharts.color(data.color).setOpacity(0).get('rgba')]
  25.             ]
  26.         };
  27.         chartOptions.xAxis.categories = data.dates;
  28.         console.log(chartDataObject);
  29.         chartData.push(chartDataObject);
  30.     });
  31.     chartOptions.series = chartData;
  33.     const element = document.createElement('div');
  34.     container.appendChild(element);
  35.     chartOptions.chart['renderTo'] = element;
  37.     this.chart = new Highcharts.Chart(chartOptions);
  38.     return this.chart;
  39. }

我尝试创建柱状图，X轴显示所有数据，Y轴显示对象。如果对象为空，绑定0；如果对象存在，我需要绑定其值。

英文:

I have this is json response

  1. {
  2. "dates": [
  3. "2023-05-01",
  4. "2023-05-02",
  5. "2023-05-03",
  6. "2023-05-04",
  7. "2023-05-05"
  8. ],
  9. "values": [
  10. {},
  11. {},
  12. {
  13. "Apple": 454,
  14. "SIM-Free, Model A19211 6.5-inch Super": 191,
  15. "Samsung's new variant which goes beyond": 3
  16. },
  17. {
  18. "OPPO F19 is officially announced on April": 4980,
  19. "Huawei’s re-badged P30 Pro New Edition": 41424,
  20. "MacBook Pro 2021 with mini-LED display": 2535,
  21. "Basic Data": 293,
  22. "Samsung Galaxy Book S (2020)": 1181,
  23. "Style and speed. Stand out on HD video calls": 378, 
  24. },
  25. {}
  26. ],
  27. }

I want like this:
使用Highcharts和Angular创建动态列图，以可视化对象数据。

can you help me how to bind object to column. currently I am doing like this:

  1.  public createChart(container, options, chartName = null) {
  2. const chartOptions = this.getOptions();
  3. const chartData = [];
  4. options.forEach((data) => {
  5. const chartDataObject = {
  6. name: [],
  7. data: [],
  8. color: '',
  9. fillColor: {}
  10. };
  11. chartDataObject.name = Object.keys(data.values)
  12. .filter((key) => Object.keys(data.values[key]).length !== 0) // Filter out empty objects
  13. .map((key) => key); // Extract the names
  14. chartDataObject.data = Object.values(data.values)
  15. .filter((value) => Object.keys(value).length !== 0) // Filter out empty objects
  16. .map((value) => (value ? Object.values(value)[0] : 0)); // Extract the names
  17. chartDataObject.color = data.color;
  18. chartDataObject.fillColor = {
  19. linearGradient: [0, 0, 0, 150],
  20. stops: [
  21. [0, data.color],
  22. [1, Highcharts.color(data.color).setOpacity(0).get('rgba')]
  23. ]
  24. };
  25. chartOptions.xAxis.categories = data.dates;
  26. console.log(chartDataObject);
  27. chartData.push(chartDataObject);
  28. });
  29. chartOptions.series = chartData;
  30. const element = document.createElement('div');
  31. container.appendChild(element);
  32. chartOptions.chart['renderTo'] = element;
  33. this.chart = new Highcharts.Chart(chartOptions);
  34. return this.chart;
  35. }

I am try to create column chart xAxis display all the data yAxis display object
that object we have name and value if object is empty bind 0 if object is there i need to bind

答案1

得分: 1

你需要创建一个带有x轴类别的堆叠柱状图。最重要的是要将数据适应Highcharts所需的系列结构。你可以像下面的方式进行：

  1. const series = [];
  3. repsonse.values.forEach((values, xVal) => {
  4.   Object.keys(values).forEach((key, index) => {
  5.     if (!series[index]) {
  6.       series.push({
  7.         data: []
  8.       });
  9.     }
  10.     series[index].data.push({
  11.       name: key,
  12.       x: xVal,
  13.       y: values[key]
  14.     });
  15.   });
  16. });
  18. Highcharts.chart('container', {
  19.   ...,
  20.   series,
  21.   xAxis: {
  22.     categories: repsonse.dates,
  23.     min: 0,
  24.     max: repsonse.dates.length - 1
  25.   }
  26. });

Live demo: http://jsfiddle.net/BlackLabel/mdv6rp2L/

API Reference: https://api.highcharts.com/highcharts/series.column.data

英文:

You need to create a stacked column chart with categories on x-axis. The most important thing is to adapt your data to the series structure required by Highcharts. You can do that for example in the way below:

  1. const series = [];
  2. repsonse.values.forEach((values, xVal) => {
  3. Object.keys(values).forEach((key, index) => {
  4. if (!series[index]) {
  5. series.push({
  6. data: []
  7. });
  8. }
  9. series[index].data.push({
  10. name: key,
  11. x: xVal,
  12. y: values[key]
  13. });
  14. });
  15. });
  16. Highcharts.chart('container', {
  17. ...,
  18. series,
  19. xAxis: {
  20. categories: repsonse.dates,
  21. min: 0,
  22. max: repsonse.dates.length - 1
  23. }
  24. });

Live demo: http://jsfiddle.net/BlackLabel/mdv6rp2L/

API Reference: https://api.highcharts.com/highcharts/series.column.data

答案2

得分: 0

  1. 不确定 `container` 和 `options` 的值是什么，但根据你当前的代码，这应该解决问题。
  3. 如 @ppotaczek 的答案中所述，你需要以结构的方式提供值，以便 HighCharts 能够正确渲染图表。
  5. 总结下面的代码，
  7. 1. `keys` - 从 `data.values` 数组中的对象中提取所有属性名称。
  9. 2. `series` - 从 `keys` 数组转换为一个包含每个系列数据的对象数组，具有 `name` 和 `value` 属性。如果 `data.values` 数组中的对象不包含该属性 (`key`)，则默认将 `value` 设置为 0。
  11. 3. `categories` - 类别是 x 轴的标签，应该使用 `data.dates` 作为值。
英文:

Unsure what are the values for container and options, but this should resolve the issue according to your current code.

As mentioned in @ppotaczek's answer, you need to provide the value in structure so that HighCharts is able to render the chart correctly.

In summary of the below code,

  1. keys - Extract all the property names from the object in the data.values array.

  2. series - Transform from the keys array into an array of objects containing each series data with name and value properties. Default the value as 0 if the object in the data.values array doesn't contain the property (key).

  3. categories - Categories are the label for the x-axis, which should use data.dates as a value.

  1. createChart(container: any, options: any[], chartName = null) {
  2.   const chartOptions = this.getOptions();
  4.   const chartData: any = [];
  6.   const keys = this.data.values
  7.     .map((x: any) => Object.keys(x))
  8.     .reduce((acc: any[], cur: any[]) => [...acc, ...cur], [] as any[]);
  10.   chartOptions.series = keys.map(
  11.     (key: any) =>
  12.       ({
  13.         name: key,
  14.         data: this.data.values.map((y: any) => y[key] ?? 0),
  15.         //color: /* Your color value */,
  16.         //fillColor: /* Your fillColor setting object */,
  17.         } as any)
  18.     );
  20.   (<AxisOptions>chartOptions.xAxis)!.categories = Array.from(this.data.dates);
  22.   const element = document.createElement('div');
  23.   container.appendChild(element);
  24.   chartOptions.chart!['renderTo'] = element;
  26.   this.chart = new Highcharts.Chart(chartOptions);
  27.   return this.chart;
  28. }

Demo @ StackBlitz

huangapple
  • 本文由 发表于 2023年5月29日 14:27:50
  • 转载请务必保留本文链接：https://go.coder-hub.com/76355100.html
  • angular
  • charts
  • highcharts
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定