简体   繁体   English

HighCharts中X轴的动态标签

[英]Dynamic Labels for X axis in HighCharts

I need to display the labels on X axis from the JSON data that I am pulling from my API. 我需要从我从API中提取的JSON数据在X轴上显示标签。

but I think we can only give static labels for the axis ? 但是我认为我们只能为轴指定静态标签吗?

Can anyone please let me know how to give dymanic labels? 谁能让我知道如何给动态标签? Here is my code: 这是我的代码:

 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' } } }] }); 

To use category xAxis type, point formats should include x-value as string, or name property. 要使用category xAxis类型,点格式应包括x值作为字符串或name属性。 For example, expected input data format is: 例如,预期的输入数据格式为:

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

Will create three categories on xAxis: Me | 将在xAxis上创建三个类别: Me | Myself | Myself I

So in your code should be something like this: 所以在您的代码中应该是这样的:

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

Where myLabel is category string. 其中myLabel是类别字符串。

Instead type:category , use categories in xAxis (if you are not using highstock ,using highcharts) 而是输入type:category,在xAxis中使用类别(如果您不使用highstock,请使用highcharts)

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

See working fiddle here 在这里查看工作小提琴

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM