高图表中 X 轴的动态标签

Dynamic Labels for X axis in HighCharts

本文关键字：动态 标签 高图表      更新时间：2023-09-26

我需要在 X 轴上显示我从 API 中提取的 JSON 数据的标签。

但我认为我们只能为轴提供静态标签？

任何人都可以告诉我如何给动态标签吗？这是我的代码：

var obj = data[$("#host").val()].iscsi_lif.result.sectoutput.sect;
			var my_data_list = [];
			var readsize = [];
			for(var key in obj) {
					var avg_latency = parseInt(obj[key].avg_latency);
					var rsize = parseInt(obj['read_size_hist.<=128KB']);
					my_data_list.push('Average Latency', parseInt(avg_latency));
					readsize.push('Read Size',parseInt(rsize));
					         
			}
$('#graphcontainer2').highcharts({
				chart: {
					type: 'column'
				},
				title: {
					text: 'Reads Sizing'
				},
				xAxis: {
					type: 'category',
					labels: {
						rotation: -45,
						style: {
							fontSize: '13px',
							fontFamily: 'Verdana, sans-serif'
						}
					}
				},
				yAxis: {
					min: 0,
					title: {
						text: 'Read Size'
					}
				},
				legend: {
					enabled: false
				},
				tooltip: {
					pointFormat: 'Read Size: <b>{point.y:.1f}%</b>'
				},
				series: [{
					name: 'Read Size',
					data: my_data_list,
					dataLabels: {
						enabled: true,
						rotation: -90,
						color: '#FFFFFF',
						align: 'right',
						format: '{point.y:.1f}', // one decimal
						y: 10, // 10 pixels down from the top
						style: {
							fontSize: '13px',
							fontFamily: 'Verdana, sans-serif'
						}
					}
				}]
			});

若要使用 xAxis 类型category点格式应包含 x 值作为字符串或name属性。例如，预期的输入数据格式为：

series: [{   
  data: [ ['Me', 10], ['Myself', 20], ['I', 100] ]
}]

将在 xAxis 上创建三个类别：Me | Myself | I

所以在你的代码中应该是这样的： 

 my_data_list.push([myLabel, parseInt(avg_latency)]);

其中myLabel是类别字符串。

改为键入：类别，在 xAxis 中使用类别（如果您不使用高库存，请使用高图表）

 chart.xAxis[0].setCategories(categories);

在此处查看工作小提琴

相关文章：