从JSON到Highcharts的温度

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

Temperature from JSON to Highcharts

问题

我有以下的代码，我想从JSON文件中实现温度，但是我不知道我在做什么错。

我尝试了不同的JSON文件配置，没有将其分为温度和露点（dew），但仍然一样。这个结果没有答案...

  1. Highcharts.getJSON(
  2.     'https://www.pogodakrotoszyn.info/tempdata.json',
  3.     function (data->temp) {
  5.         Highcharts.chart('container', {
  6.             chart: {
  7.                 zoomType: 'x'
  8.             },
  9.             title: {
  10.                 text: '温度',
  11.                 align: 'left'
  12.             },
  13.             subtitle: {
  14.                 text: document.ontouchstart === undefined ?
  15.                     '单击并拖动绘图区域进行缩放' : '捏图表以放大',
  16.                 align: 'left'
  17.             },
  18.             xAxis: {
  19.                 type: 'datetime'
  20.             },
  21.             yAxis: {
  22.                 title: {
  23.                     text: '温度'
  24.                 }
  25.             },
  26.             legend: {
  27.                 enabled: false
  28.             },
  29.             plotOptions: {
  30.                 area: {
  31.                     fillColor: {
  32.                         linearGradient: {
  33.                             x1: 0,
  34.                             y1: 0,
  35.                             x2: 0,
  36.                             y2: 1
  37.                         },
  38.                         stops: [
  39.                             [0, Highcharts.getOptions().colors[0]],
  40.                             [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
  41.                         ]
  42.                     },
  43.                     marker: {
  44.                         radius: 2
  45.                     },
  46.                     lineWidth: 1,
  47.                     states: {
  48.                         hover: {
  49.                             lineWidth: 1
  50.                         }
  51.                     },
  52.                     threshold: null
  53.                 }
  54.             },
  56.             series: [{
  57.                 type: 'area',
  58.                 name: '温度',
  59.                 data: data->temp;
  60.             }]
  61.         });
  62.     }
  63. );

希望这有帮助。

英文:

I have code like below, I want to implement temperature on it from JSON file, however I don't know what I am doing wrong.

I tried different configurations of the JSON file itself, without the division into temperature and dew point (dew), but still the same. This result gives no answer...

  1. Highcharts.getJSON(
  2. 'https://www.pogodakrotoszyn.info/tempdata.json',
  3. function (data->temp) {
  4. Highcharts.chart('container', {
  5. chart: {
  6. zoomType: 'x'
  7. },
  8. title: {
  9. text: 'Temperature',
  10. align: 'left'
  11. },
  12. subtitle: {
  13. text: document.ontouchstart === undefined ?
  14. 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in',
  15. align: 'left'
  16. },
  17. xAxis: {
  18. type: 'datetime'
  19. },
  20. yAxis: {
  21. title: {
  22. text: 'Temperature'
  23. }
  24. },
  25. legend: {
  26. enabled: false
  27. },
  28. plotOptions: {
  29. area: {
  30. fillColor: {
  31. linearGradient: {
  32. x1: 0,
  33. y1: 0,
  34. x2: 0,
  35. y2: 1
  36. },
  37. stops: [
  38. [0, Highcharts.getOptions().colors[0]],
  39. [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
  40. ]
  41. },
  42. marker: {
  43. radius: 2
  44. },
  45. lineWidth: 1,
  46. states: {
  47. hover: {
  48. lineWidth: 1
  49. }
  50. },
  51. threshold: null
  52. }
  53. },
  54. series: [{
  55. type: 'area',
  56. name: 'Temperature',
  57. data: data->temp;
  58. }]
  59. });
  60. }
  61. );

答案1

得分: 1

问题在于你在JavaScript代码中使用了PHP语法来访问对象的属性。不应该使用 data->temp，而应该像这样使用 data.temp。

  1. Highcharts.getJSON(
  2.     'https://www.pogodakrotoszyn.info/tempdata.json',
  3.     function (data) {
  5.         Highcharts.chart('container', {
  6.             ...
  7.             series: [{
  8.                 type: 'area',
  9.                 name: 'Temperature',
  10.                 data: data.temp
  11.             }]
  12.         });
  13.     }
  14. );

演示: https://jsfiddle.net/BlackLabel/sypfmn10/
MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

英文:

The problem is that in the JavaScript code you use PHP syntax to access property of the object. Instead of data->temp you should do it like this data.temp.

  1. Highcharts.getJSON(
  2. 'https://www.pogodakrotoszyn.info/tempdata.json',
  3. function (data) {
  4. Highcharts.chart('container', {
  5. ...
  6. series: [{
  7. type: 'area',
  8. name: 'Temperature',
  9. data: data.temp
  10. }]
  11. });
  12. }
  13. );

Demo: https://jsfiddle.net/BlackLabel/sypfmn10/<br/>
MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

huangapple
  • 本文由 发表于 2023年3月7日 22:37:29
  • 转载请务必保留本文链接：https://go.coder-hub.com/75663358.html
  • highcharts
  • json
  • php
匿名

发表评论

匿名网友

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

确定