在Highchart中给线下方的区域上色。

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

Color the area below the line in a highchart

问题

Here's the translated part of the content you provided:

我需要修改一个线状图表(我没有创建它)。该应用程序从数据库中提取数据,并在将其添加到图表之前按小时对每个元素进行排序。当你悬停在一个点上时,应用程序看起来像这样:

我的任务是用不同的颜色(就像面积图表)填充下面的区域:

这是生成图表的代码:

  1. var chart = Highcharts.stockChart('production-time-chart', {
  2. // 其他不相关的配置...
  3. chart: {
  4. type: 'areaspline', // 这里的类型设置为'areaspline'
  5. zoomType: 'xy',
  6. plotBorderWidth: 2,
  7. // 其他配置...
  8. },
  9. // 其他配置...
  10. });

这是用于添加系列的代码:

  1. chart.addSeries({
  2. color: '#2F86A6',
  3. lineWidth: 3,
  4. name: name,
  5. keys: ['x', 'y', 'name', 'selectable', 'partnumber', 'rawObject', 'marker.lineColor', 'marker.lineWidth'],
  6. data: data,
  7. showInNavigator: true,
  8. });

我的目标是在点下面添加颜色区域,但保留样式和功能性。如果您需要更多信息,请告诉我。

英文:

I need to modify a line chart (that I didn't create). The app extracts data from a database and order each element by hour before adding it to the chart. When you hover a point, the app look like this:

在Highchart中给线下方的区域上色。

My task is to paint the below area with a different color (like an area chart):

在Highchart中给线下方的区域上色。

This is the code that generates the chart:

  1. var chart = Highcharts.stockChart('production-time-chart', {
  2. legend: {
  3. /*Not relevant (i think)*/
  4. },
  5. time: {
  6. timezoneOffset: new Date(Date.now()).getTimezoneOffset(),
  7. },
  8. rangeSelector: {
  9. buttonSpacing: 10,
  10. buttonTheme: {
  11. width: 120
  12. },
  13. inputDateFormat: '%H:%M:%S',
  14. buttons: /*Not relevant (i think)*/,
  15. selected: currentNavigatorButton,
  16. },
  17. chart: {
  18. type: 'areaspline',
  19. zoomType: 'xy',
  20. plotBorderWidth: 2,
  21. events: {
  22. click: () => clearPoints(),
  23. selection: function (e) {
  24. clearPoints();
  25. if (e.xAxis.length > 0 && e.yAxis.length > 0) {
  26. var models = [];
  27. var chartObj = this,
  28. xMin = e.xAxis[0].min,
  29. xMax = e.xAxis[0].max,
  30. yMin = e.yAxis[0].min,
  31. yMax = e.yAxis[0].max;
  32. if (chartObj.series[0]) {
  33. chartObj.series[0].data.forEach((elem) => {
  34. if (elem.x >= xMin && elem.x <= xMax && elem.y >= yMin && elem.y <= yMax)
  35. if (elem.options.selectable) {
  36. //selectPoint(elem);
  37. models.push(elem.options);
  38. }
  39. });
  40. }
  41. evalPointsChart(models);
  42. }
  43. return false;
  44. },
  45. redraw: function () {
  46. var [min, max] = calculateNavigator();
  47. chart.xAxis[0].setExtremes(min, max, false);
  48. }
  49. },
  50. height: 500
  51. },
  52. yAxis: {
  53. title: {
  54. text: 'Minutos'
  55. },
  56. crosshair: true
  57. },
  58. xAxis: {
  59. title: {
  60. text: null//'Hora'
  61. },
  62. dateTimeLabelFormats: {
  63. second: '%H:%M:%S',
  64. //day: '%e. %b'
  65. },
  66. events: /*Not relevant (i think)*/
  67. },
  68. plotOptions: {
  69. line: {
  70. point: {
  71. events: /*Not relevant (i think)*/
  72. },
  73. marker: /*Not relevant (i think)*/,
  74. allowPointSelect: true,
  75. },
  76. },
  77. navigator: {
  78. series: {
  79. lineWidth: 2,
  80. showInNavigator: true
  81. },
  82. },
  83. tooltip: {
  84. formatter: function () {
  85. return ['<b>' + toTimeStr(new Date(this.x)) + '</b>'].concat(
  86. this.points ?
  87. this.points.map(function (point) {
  88. return `<b> ${point.point.options.partnumber ? point.point.options.partnumber + " - " : ""}
  89. ${point.series.name}
  90. </b>: ${point.y} mins.`;
  91. }) :
  92. []
  93. );
  94. },
  95. split: true
  96. },
  97. });

And this is the code used to add a serie:

  1. chart.addSeries({
  2. color: '#2F86A6',
  3. lineWidth: 3,
  4. name: name,
  5. keys: ['x', 'y', 'name', 'selectable', 'partnumber', 'rawObject', 'marker.lineColor', 'marker.lineWidth'],
  6. data: data,
  7. showInNavigator: true,
  8. });

I look for solutions here but they either use two separate series to display 2 different charts or have a very different way to create the chart. The closer that I came to resolve the issue was adding the property "type: 'areaspline'" to the chart constructor, but it overwrites the style and hide the points:

在Highchart中给线下方的区域上色。

My goal is to add color to the area below the points, but preserving the style and functionality. Tell me if you need more info.

答案1

得分: 2

Instead of areaspline, you need to use area series type and change plotOptions.line to plotOptions.area or plotOptions.series. For example:

  1. plotOptions: {
  2. series: {
  3. ...,
  4. marker: {
  5. enabled: true
  6. }
  7. }
  8. }
  1. chart.addSeries({
  2. type: 'area',
  3. ...
  4. });

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

Docs: https://www.highcharts.com/docs/chart-and-series-types/chart-types

英文:

Instead of areaspline, you need to use area series type and change plotOptions.line to plotOptions.area or plotOptions.series. For example:

  1. plotOptions: {
  2. series: {
  3. ...,
  4. marker: {
  5. enabled: true
  6. }
  7. }
  8. }

  1. chart.addSeries({
  2. type: 'area',
  3. ...
  4. });

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

Docs: https://www.highcharts.com/docs/chart-and-series-types/chart-types

huangapple
  • 本文由 发表于 2023年5月17日 09:05:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/76267953.html
匿名

发表评论

匿名网友

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

确定