amchart访问结构化数据对象内的值

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

amchart accessing values inside a structured data object

问题

I've translated the code portion for you:

  1. 如何向AMchart的JSON对象添加额外数据？ <br/>
  2. 当我的对象简单时，一切都可以解析：<br/>
  3. `var data = [ {year: "1930",italy: 4,germany: 5.1,uk: 3}, {year: "1934",italy: 1,germany: 2,uk: 6}, {year: "1938",italy: 2,germany: 3,uk: 1} ];` <br/>
  5. 但是当它看起来像这样时，就不行了：<br/>
  6. `var data = [ {year:"1930", italy:[{aa:20,bb:"21"}], germany:[{aa:30,bb:"44"}], uk:[{aa:40,bb:"77"}] } ];`
  8. 这是负责解析的代码：<br/>
  10. var series = chart.series.push(
  11. am5xy.LineSeries.new(root, {
  12.   name: name,
  13.   xAxis: xAxis,
  14.   yAxis: yAxis,
  15.   valueYField: field, // << -- issue
  16.   categoryXField: "year",
  17.   tooltip: am5.Tooltip.new(root, {
  18.     pointerOrientation: "horizontal",
  19.     labelText: "[bold]{name}[/]\n{categoryX}: {valueY}"
  20.   })
  21. })
  22. );
  24. 我可以使用这个获取正确的值，但是当我输入值并替换上面的 `field` 时，代码就不能正确解析，<br/>
  26. if(chart.series._values[0]){
  27. var data1 = chart.series._values[0]._dataItems[0].dataContext;
  29. if(data1[field][0])
  30.   var valY = data1[field][0].aa;
  31.   
  32. //console.log( valY );
  33. }
  35. 这是我的完整代码：
  37. am5.ready(function() {
  39. var root = am5.Root.new("chartdiv");
  40. root._logo.dispose();
  42. root.setThemes([
  43.   am5themes_Animated.new(root)
  44. ]);
  46. var chart = root.container.children.push(
  47.   am5xy.XYChart.new(root, {
  48.     panX: true,
  49.     panY: true,
  50.     wheelX: "panX",
  51.     wheelY: "zoomX",
  52.     layout: root.verticalLayout,
  53.     pinchZoomX:true
  54.   })
  55. );
  57. // 添加光标
  58. var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
  59.   behavior: "none"
  60. }));
  61. cursor.lineY.set("visible", false);
  63. // 数据
  64. var data = [ {year:"1930", italy:[{aa:20,bb:"21"}], germany:[{aa:30,bb:"44"}], uk:[{aa:40,bb:"77"}] } ];
  66. // 创建轴
  67. var xRenderer = am5xy.AxisRendererX.new(root, {});
  68. xRenderer.grid.template.set("location", 0.5);
  69. xRenderer.labels.template.setAll({
  70.   location: 0.5,
  71.   multiLocation: 0.5
  72. });
  74. var xAxis = chart.xAxes.push(
  75.   am5xy.CategoryAxis.new(root, {
  76.     categoryField: "year",
  77.     renderer: xRenderer,
  78.     tooltip: am5.Tooltip.new(root, {})
  79.   })
  80. );
  82. xAxis.data.setAll(data);
  84. var yAxis = chart.yAxes.push(
  85.   am5xy.ValueAxis.new(root, {
  86.     maxPrecision: 1,
  87.     renderer: am5xy.AxisRendererY.new(root, {
  88.       inversed: false
  89.     })
  90.   })
  91. );
  93. function createSeries(name, field) { 
  95.   if(chart.series._values[0]){
  96.     var data1 = chart.series._values[0]._dataItems[0].dataContext;
  97.     
  98.     if(data1[field][0])
  99.       var valY = data1[field][0].aa;
  100.       
  101.     //console.log( valY );
  102.   }
  104.   var series = chart.series.push(
  105.     am5xy.LineSeries.new(root, {
  106.       name: name,
  107.       xAxis: xAxis,
  108.       yAxis: yAxis,
  109.       valueYField: field, // 替换为: valY 时出现问题
  110.       categoryXField: "year",
  111.       tooltip: am5.Tooltip.new(root, {
  112.         pointerOrientation: "horizontal",
  113.         labelText: "[bold]{name}[/]\n{categoryX}: {valueY}"
  114.       })
  115.     })
  116.   );
  117.   
  118.   series.bullets.push(function() {
  119.     return am5.Bullet.new(root, {
  120.       sprite: am5.Circle.new(root, {
  121.         radius: 5,
  122.         fill: series.get("fill")
  123.       })
  124.     });
  125.   });
  127.   series.set("setStateOnChildren", true);
  128.   series.states.create("hover", {});
  130.   series.mainContainer.set("setStateOnChildren", true);
  131.   series.mainContainer.states.create("hover", {});
  133.   series.strokes.template.states.create("hover", {
  134.     strokeWidth: 4
  135.   });
  137.   series.data.setAll(data);
  138.   series.show(1000);
  139. }
  142. createSeries("Italy", "italy");
  143. createSeries("Germany", "germany");
  144. createSeries("UK", "uk");
  146. var legend = chart.children.push(
  147.   am5.Legend.new(root, {
  148.     centerX: am5.percent(90),
  149.     x: am5.percent(90),
  150.     centerY: am5.percent(105),
  151.     y: am5.percent(105),
  152.   })
  153. );
  155. // 当悬停在图例项上时，使系列更改状态
  156. legend.itemContainers.template.states.create("hover", {});
  158. legend.itemContainers.template.events.on("pointerover", function(e) {
  159.   e.target.dataItem.dataContext.hover();
  160. });
  161. legend.itemContainers.template.events.on("pointerout", function(e) {
  162.   e.target.dataItem.dataContext.unhover();
  163. });
  165. legend.data.setAll(chart.series.values);
  167. chart.appear(1000, 100);
  169. });

请注意，我已经翻译了代码，但其中包含一些HTML转义字符（如 <br/>），你可能需要根据需要进行调整。

英文:

How can I add extra data to the json object in AMchart? <br/>
When my obj is simple everything parses: <br/>
var data = [ {year: &quot;1930&quot;,italy: 4,germany: 5.1,uk: 3}, {year: &quot;1934&quot;,italy: 1,germany: 2,uk: 6}, {year: &quot;1938&quot;,italy: 2,germany: 3,uk: 1} ]; <br/>

But when it looks like this it does not: <br/>
var data = [ {year:&quot;1930&quot;, italy:[{aa:20,bb:&quot;21&quot;}], germany:[{aa:30,bb:&quot;44&quot;}], uk:[{aa:40,bb:&quot;77&quot;}] } ];

This is the code that is responsible for parsing:<br/>

  1.    var series = chart.series.push(
  2. am5xy.LineSeries.new(root, {
  3. name: name,
  4. xAxis: xAxis,
  5. yAxis: yAxis,
  6. valueYField: field, // &lt;&lt; -- issue
  7. categoryXField: &quot;year&quot;,
  8. tooltip: am5.Tooltip.new(root, {
  9. pointerOrientation: &quot;horizontal&quot;,
  10. labelText: &quot;[bold]{name}[/]\n{categoryX}: {valueY}&quot;
  11. })
  12. })
  13. );

I can get the correct values using this but when i enter the values and replace field above the code does not parse correct,<br/>

  1.   if(chart.series._values[0]){
  2. var data1 = chart.series._values[0]._dataItems[0].dataContext;
  3. if(data1[field][0])
  4. var valY = data1[field][0].aa;
  5. //console.log( valY );
  6. }

here is my complete code:

  1. am5.ready(function() {
  2. var root = am5.Root.new(&quot;chartdiv&quot;);
  3. root._logo.dispose();
  4. root.setThemes([
  5. am5themes_Animated.new(root)
  6. ]);
  7. var chart = root.container.children.push(
  8. am5xy.XYChart.new(root, {
  9. panX: true,
  10. panY: true,
  11. wheelX: &quot;panX&quot;,
  12. wheelY: &quot;zoomX&quot;,
  13. layout: root.verticalLayout,
  14. pinchZoomX:true
  15. })
  16. );
  17. // Add cursor
  18. // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
  19. var cursor = chart.set(&quot;cursor&quot;, am5xy.XYCursor.new(root, {
  20. behavior: &quot;none&quot;
  21. }));
  22. cursor.lineY.set(&quot;visible&quot;, false);
  23. // The data
  24. var data = [    {year:&quot;1930&quot;, italy:[{aa:20,bb:&quot;21&quot;}], germany:[{aa:30,bb:&quot;44&quot;}], uk:[{aa:40,bb:&quot;77&quot;}] } ];
  25. /* var data = [ {year: &quot;1930&quot;,italy: 4,germany: 5.1,uk: 3},
  26. {year: &quot;1934&quot;,italy: 1,germany: 2,uk: 6},
  27. {year: &quot;1938&quot;,italy: 2,germany: 3,uk: 1} ]; */
  28. // Create axes
  29. // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
  30. var xRenderer = am5xy.AxisRendererX.new(root, {});
  31. xRenderer.grid.template.set(&quot;location&quot;, 0.5);
  32. xRenderer.labels.template.setAll({
  33. location: 0.5,
  34. multiLocation: 0.5
  35. });
  36. var xAxis = chart.xAxes.push(
  37. am5xy.CategoryAxis.new(root, {
  38. categoryField: &quot;year&quot;,
  39. renderer: xRenderer,
  40. tooltip: am5.Tooltip.new(root, {})
  41. })
  42. );
  43. xAxis.data.setAll(data);
  44. var yAxis = chart.yAxes.push(
  45. am5xy.ValueAxis.new(root, {
  46. maxPrecision: 1,
  47. renderer: am5xy.AxisRendererY.new(root, {
  48. inversed: false
  49. })
  50. })
  51. );
  52. function createSeries(name, field) { 
  53. if(chart.series._values[0]){
  54. var data1 = chart.series._values[0]._dataItems[0].dataContext;
  55. if(data1[field][0])
  56. var valY = data1[field][0].aa;
  57. //console.log( valY );
  58. }
  59. var series = chart.series.push(
  60. am5xy.LineSeries.new(root, {
  61. name: name,
  62. xAxis: xAxis,
  63. yAxis: yAxis,
  64. valueYField: field, // issue when replced with: valY
  65. categoryXField: &quot;year&quot;,
  66. tooltip: am5.Tooltip.new(root, {
  67. pointerOrientation: &quot;horizontal&quot;,
  68. labelText: &quot;[bold]{name}[/]\n{categoryX}: {valueY}&quot;
  69. })
  70. })
  71. );
  72. series.bullets.push(function() {
  73. return am5.Bullet.new(root, {
  74. sprite: am5.Circle.new(root, {
  75. radius: 5,
  76. fill: series.get(&quot;fill&quot;)
  77. })
  78. });
  79. });
  80. series.set(&quot;setStateOnChildren&quot;, true);
  81. series.states.create(&quot;hover&quot;, {});
  82. series.mainContainer.set(&quot;setStateOnChildren&quot;, true);
  83. series.mainContainer.states.create(&quot;hover&quot;, {});
  84. series.strokes.template.states.create(&quot;hover&quot;, {
  85. strokeWidth: 4
  86. });
  87. series.data.setAll(data);
  88. series.show(1000);
  89. }
  90. createSeries(&quot;Italy&quot;, &quot;italy&quot;);
  91. createSeries(&quot;Germany&quot;, &quot;germany&quot;);
  92. createSeries(&quot;UK&quot;, &quot;uk&quot;);
  93. var legend = chart.children.push(
  94. am5.Legend.new(root, {
  95. centerX: am5.percent(90),
  96. x: am5.percent(90),
  97. centerY: am5.percent(105),
  98. y: am5.percent(105),
  99. })
  100. );
  101. // Make series change state when legend item is hovered
  102. legend.itemContainers.template.states.create(&quot;hover&quot;, {});
  103. legend.itemContainers.template.events.on(&quot;pointerover&quot;, function(e) {
  104. e.target.dataItem.dataContext.hover();
  105. });
  106. legend.itemContainers.template.events.on(&quot;pointerout&quot;, function(e) {
  107. e.target.dataItem.dataContext.unhover();
  108. });
  109. legend.data.setAll(chart.series.values);
  110. chart.appear(1000, 100);
  111. });

答案1

得分: 2

以下是翻译好的内容：

"amcharts 似乎不提供通过其 数据字段 结构化访问数据子对象的方式。

因此，唯一可用的解决方案是预处理数据；对于您的数据结构，您可以使用类似以下的方法来覆盖两种情况：

  1. series.data.setAll(data
  2. .map(o => Object.fromEntries(Object.entries(o)
  3. .map(([k, v]) => [k, v?.[0]?.aa ?? v]))
  4. )
  5. )

代码片段如下：

  1. var root = am5.Root.new("chartdiv");
  2. root._logo.dispose();
  3. root.setThemes([
  4. am5themes_Animated.new(root)
  5. ]);
  6. var chart = root.container.children.push(
  7. am5xy.XYChart.new(root, {
  8. panX: true,
  9. panY: true,
  10. wheelX: "panX",
  11. wheelY: "zoomX",
  12. layout: root.verticalLayout,
  13. pinchZoomX:true
  14. })
  15. );
  16. // 添加光标
  17. // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
  18. var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
  19. behavior: "none"
  20. }));
  21. cursor.lineY.set("visible", false);
  22. // 数据
  23. var data = [{year: "1930", italy: [{aa:20,bb:"21"}], germany: [{aa:30,bb:"44"}], uk: [{aa:40,bb:"77"}] },
  24. {year: "1934", italy: 1, germany: 2, uk: 6}, {year: "1938", italy: 2, germany: 3, uk: 1}];
  25. // 创建轴
  26. // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
  27. var xRenderer = am5xy.AxisRendererX.new(root, {});
  28. xRenderer.grid.template.set("location", 0.5);
  29. xRenderer.labels.template.setAll({
  30. location: 0.5,
  31. multiLocation: 0.5
  32. });
  33. var xAxis = chart.xAxes.push(
  34. am5xy.CategoryAxis.new(root, {
  35. categoryField: "year",
  36. renderer: xRenderer,
  37. tooltip: am5.Tooltip.new(root, {})
  38. })
  39. );
  40. xAxis.data.setAll(data);
  41. var yAxis = chart.yAxes.push(
  42. am5xy.ValueAxis.new(root, {
  43. maxPrecision: 1,
  44. renderer: am5xy.AxisRendererY.new(root, {
  45. inversed: false
  46. })
  47. })
  48. );
  49. function createSeries(name, field) {
  50. var series = chart.series.push(
  51. am5xy.LineSeries.new(root, {
  52. name: name,
  53. xAxis: xAxis,
  54. yAxis: yAxis,
  55. valueYField: field,
  56. categoryXField: "year",
  57. tooltip: am5.Tooltip.new(root, {
  58. pointerOrientation: "horizontal",
  59. labelText: "[bold]{name}[/]\n{categoryX}: {valueY}"
  60. })
  61. })
  62. );
  63. series.bullets.push(function() {
  64. return am5.Bullet.new(root, {
  65. sprite: am5.Circle.new(root, {
  66. radius: 5,
  67. fill: series.get("fill")
  68. })
  69. });
  70. });
  71. series.set("setStateOnChildren", true);
  72. series.states.create("hover", {});
  73. series.mainContainer.set("setStateOnChildren", true);
  74. series.mainContainer.states.create("hover", {});
  75. series.strokes.template.states.create("hover", {
  76. strokeWidth: 4
  77. });
  78. series.data.setAll(data.map(o => Object.fromEntries(Object.entries(o).map(([k, v]) => [k, v?.[0]?.aa ?? v]))))
  79. series.show(1000);
  80. }
  81. createSeries("Italy", "italy");
  82. createSeries("Germany", "germany");
  83. createSeries("UK", "uk");
  84. var legend = chart.children.push(
  85. am5.Legend.new(root, {
  86. centerX: am5.percent(90),
  87. x: am5.percent(90),
  88. centerY: am5.percent(105),
  89. y: am5.percent(105),
  90. })
  91. );
  92. // 当图例项悬停时使系列更改状态
  93. legend.itemContainers.template.states.create("hover", {});
  94. legend.itemContainers.template.events.on("pointerover", function(e) {
  95. e.target.dataItem.dataContext.hover();
  96. });
  97. legend.itemContainers.template.events.on("pointerout", function(e) {
  98. e.target.dataItem.dataContext.unhover();
  99. });
  100. legend.data.setAll(chart.series.values);
  101. chart.appear(1000, 100);
  1. #chartdiv {
  2. width: 100%;
  3. height: 300px;
  4. }
  1. <div id="chartdiv"></div>
  2. <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
  3. <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
  4. <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
英文:

It appears amcharts doesn't offer structured access to sub-objects in data through its data fields.

Thus, the only solution available is to preprocess the data; for your data structure, to cover both cases you could use something like

  1. series.data.setAll(data
  2. .map(o=&gt;Object.fromEntries(Object.entries(o)
  3. .map(([k, v])=&gt;[k, v?.[0]?.aa ?? v]))
  4. )
  5. )

Snippet:
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. var root = am5.Root.new(&quot;chartdiv&quot;);
  2. root._logo.dispose();
  3. root.setThemes([
  4. am5themes_Animated.new(root)
  5. ]);
  6. var chart = root.container.children.push(
  7. am5xy.XYChart.new(root, {
  8. panX: true,
  9. panY: true,
  10. wheelX: &quot;panX&quot;,
  11. wheelY: &quot;zoomX&quot;,
  12. layout: root.verticalLayout,
  13. pinchZoomX:true
  14. })
  15. );
  16. // Add cursor
  17. // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
  18. var cursor = chart.set(&quot;cursor&quot;, am5xy.XYCursor.new(root, {
  19. behavior: &quot;none&quot;
  20. }));
  21. cursor.lineY.set(&quot;visible&quot;, false);
  22. // The data
  23. var data = [{year:&quot;1930&quot;, italy:[{aa:20,bb:&quot;21&quot;}], germany:[{aa:30,bb:&quot;44&quot;}], uk:[{aa:40,bb:&quot;77&quot;}] },
  24. {year: &quot;1934&quot;, italy: 1,germany: 2,uk: 6}, {year: &quot;1938&quot;,italy: 2,germany: 3,uk: 1}];
  25. //var data = [ {year: &quot;1930&quot;,italy: 4,germany: 5.1,uk: 3}, {year: &quot;1934&quot;,italy: 1,germany: 2,uk: 6}, {year: &quot;1938&quot;,italy: 2,germany: 3,uk: 1} ];
  26. // Create axes
  27. // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
  28. var xRenderer = am5xy.AxisRendererX.new(root, {});
  29. xRenderer.grid.template.set(&quot;location&quot;, 0.5);
  30. xRenderer.labels.template.setAll({
  31. location: 0.5,
  32. multiLocation: 0.5
  33. });
  34. var xAxis = chart.xAxes.push(
  35. am5xy.CategoryAxis.new(root, {
  36. categoryField: &quot;year&quot;,
  37. renderer: xRenderer,
  38. tooltip: am5.Tooltip.new(root, {})
  39. })
  40. );
  41. xAxis.data.setAll(data);
  42. var yAxis = chart.yAxes.push(
  43. am5xy.ValueAxis.new(root, {
  44. maxPrecision: 1,
  45. renderer: am5xy.AxisRendererY.new(root, {
  46. inversed: false
  47. })
  48. })
  49. );
  50. function createSeries(name, field) {
  51. var series = chart.series.push(
  52. am5xy.LineSeries.new(root, {
  53. name: name,
  54. xAxis: xAxis,
  55. yAxis: yAxis,
  56. valueYField: field,
  57. categoryXField: &quot;year&quot;,
  58. tooltip: am5.Tooltip.new(root, {
  59. pointerOrientation: &quot;horizontal&quot;,
  60. labelText: &quot;[bold]{name}[/]\n{categoryX}: {valueY}&quot;
  61. })
  62. })
  63. );
  64. series.bullets.push(function() {
  65. return am5.Bullet.new(root, {
  66. sprite: am5.Circle.new(root, {
  67. radius: 5,
  68. fill: series.get(&quot;fill&quot;)
  69. })
  70. });
  71. });
  72. series.set(&quot;setStateOnChildren&quot;, true);
  73. series.states.create(&quot;hover&quot;, {});
  74. series.mainContainer.set(&quot;setStateOnChildren&quot;, true);
  75. series.mainContainer.states.create(&quot;hover&quot;, {});
  76. series.strokes.template.states.create(&quot;hover&quot;, {
  77. strokeWidth: 4
  78. });
  79. series.data.setAll(data.map(o=&gt;Object.fromEntries(Object.entries(o).map(([k, v])=&gt;[k, v?.[0]?.aa ?? v]))))
  80. series.show(1000);
  81. }
  82. createSeries(&quot;Italy&quot;, &quot;italy&quot;);
  83. createSeries(&quot;Germany&quot;, &quot;germany&quot;);
  84. createSeries(&quot;UK&quot;, &quot;uk&quot;);
  85. var legend = chart.children.push(
  86. am5.Legend.new(root, {
  87. centerX: am5.percent(90),
  88. x: am5.percent(90),
  89. centerY: am5.percent(105),
  90. y: am5.percent(105),
  91. })
  92. );
  93. // Make series change state when legend item is hovered
  94. legend.itemContainers.template.states.create(&quot;hover&quot;, {});
  95. legend.itemContainers.template.events.on(&quot;pointerover&quot;, function(e) {
  96. e.target.dataItem.dataContext.hover();
  97. });
  98. legend.itemContainers.template.events.on(&quot;pointerout&quot;, function(e) {
  99. e.target.dataItem.dataContext.unhover();
  100. });
  101. legend.data.setAll(chart.series.values);
  102. chart.appear(1000, 100);

<!-- language: lang-css -->

  1.  #chartdiv {
  2. width: 100%;
  3. height: 300px;
  4. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;chartdiv&quot;&gt;&lt;/div&gt;
  2. &lt;script src=&quot;https://cdn.amcharts.com/lib/5/index.js&quot;&gt;&lt;/script&gt;
  3. &lt;script src=&quot;https://cdn.amcharts.com/lib/5/xy.js&quot;&gt;&lt;/script&gt;
  4. &lt;script src=&quot;https://cdn.amcharts.com/lib/5/themes/Animated.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月21日 03:13:42
  • 转载请务必保留本文链接：https://go.coder-hub.com/76296962.html
  • amcharts
  • amcharts5
  • javascript
匿名

发表评论

匿名网友

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

确定