如何在Highcharts JS中为多列图表显示沿Y轴的X轴虚线标签。

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

How to show x-axis dotted labels on y-axis for multiple column chart in hightchart js

问题

可以使用Highcharts在多列图表上显示x轴标签名称为“年度销售”（year to date sales），并将y轴标签设置为“销售OKR”（OKR for sales）。以下是您提供的脚本的翻译：

  1. chart = Highcharts.chart('chart-container_' + nextChartId, {
  2.     chart: {
  3.         spacingTop: 3,
  4.         spacingRight: 0,
  5.         spacingBottom: 3,
  6.         spacingLeft: 0,
  7.         type: chartType,
  8.         inverted: hasSwitchChart
  9.     },
  10.     title: {
  11.         text: resData.name,
  12.     },
  13.     
  14.     yAxis: {
  15.         title: {
  16.             text: yAxisName
  17.         },
  18.         
  19.     }, 
  20.     xAxis: {
  21.         categories: chartData,
  22.         type: 'datetime',
  23.         // reversed: true 
  24.         title: {
  25.             text: xAxisName
  26.         },
  27.            
  28.     },
  29.     plotOptions: {
  30.         series: {
  31.             borderWidth: 0,
  32.             dataLabels: {
  33.                 enabled: hasShowDataValue,
  34.                 format: '{point.y}'
  35.             }
  36.         }
  37.     },
  38.     series: chartSeriesData 
  39. });

请查看附件！

示例链接：https://jsfiddle.net/js2t3hn9/3/

请指导我。
谢谢！

英文:

Can we show x-axis label names year to date sales and OKR for sales on y-axis for multiple column chart using highchart.
I am using this script

  1. chart = Highcharts.chart('chart-container_'+nextChartId, {
  2. 			chart: {
  3. 				spacingTop: 3,
  4. 				spacingRight: 0,
  5. 				spacingBottom: 3,
  6. 				spacingLeft: 0,
  7. 				type: chartType, 
  8. 				inverted: hasSwitchChart
  9. 			},
  10. 			title: {
  11. 				text: resData.name, 
  12. 			},
  13. 			 
  14. 			yAxis: {
  15. 				title: {
  16. 					text: yAxisName
  17. 				},
  18. 				
  19. 			}, 
  20. 			xAxis: {
  21. 				categories: chartData,
  22. 				type: 'datetime',
  23. 				//reversed: true 
  24. 				title: {
  25. 					text: xAxisName
  26. 				},
  27. 				   
  28. 			},
  29. 			plotOptions: {
  30. 				series: {
  31. 							borderWidth: 0,
  32. 							dataLabels: {
  33. 								enabled: hasShowDataValue,
  34. 								format: '{point.y}'
  35. 						}
  36. 				}
  37. 			},
  38. 			series: chartSeriesData 
  39. 		});

Please see attachment!

Example: https://jsfiddle.net/js2t3hn9/3/

Please guide me.
Thanks

如何在Highcharts JS中为多列图表显示沿Y轴的X轴虚线标签。

答案1

得分: 1

我看到你想要将图例项目放在y轴标题的位置。要做到这一点，你可以在render事件中旋转和动态定位图例，例如：

  1. Highcharts.chart('container', {
  2.   chart: {
  3.     ...,
  4.     events: {
  5.       render: function() {
  6.         const chart = this;
  7.         chart.legend.group.attr({
  8.           rotation: -90,
  9.           translateX: 0,
  10.           translateY: chart.yAxis[0].height / 2 + chart.legend.legendWidth / 2 + chart.plotTop
  11.         });
  12.       }
  13.     }
  14.   },
  15.   legend: {
  16.     enabled: true,
  17.     align: 'left',
  18.     verticalAlign: 'middle',
  19.     floating: true
  20.   },
  21.   ...
  22. });

Live demo: 示例链接

API参考文档: API 参考文档

英文:

I see that you want to place legend items in place of the y-axis title. To do that, you can rotate and dynamically position the legend, for example in render event.

  1. Highcharts.chart('container', {
  2.   chart: {
  3.     ...,
  4.     events: {
  5.       render: function() {
  6.         const chart = this;
  7.         chart.legend.group.attr({
  8.           rotation: -90,
  9.           translateX: 0,
  10.           translateY: chart.yAxis[0].height / 2 + chart.legend.legendWidth / 2 + chart.plotTop
  11.         });
  12.       }
  13.     }
  14.   },
  15.   legend: {
  16.     enabled: true,
  17.     align: 'left',
  18.     verticalAlign: 'middle',
  19.     floating: true
  20.   },
  21.   ...
  22. });

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

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr

huangapple
  • 本文由 发表于 2023年6月1日 14:58:37
  • 转载请务必保留本文链接：https://go.coder-hub.com/76379388.html
  • highcharts
  • javascript
匿名

发表评论

匿名网友

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

确定