条形图标签
条形图标签
提问于 2016-12-08 15:41:05
我正在尝试创建一个条形图，其中有几个列，它们的标签应该显示该列的名称。
请参阅fiddle - http://jsfiddle.net/akshayasharma/cdweowtq/3/
$(function () {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [{y: 49.9}]
}, {
name: 'New York',
data: [{y: 83.6}]
}]
});
});我想将我的第一列标记为“东京”，它显示了东京的值，而“纽约”则显示了“纽约”的值。
回答 2
Stack Overflow用户
发布于 2016-12-08 16:06:00
一种选择是使用dateLabels并向您的数据系列添加一个name：http://jsfiddle.net/cdweowtq/5/
Stack Overflow用户
发布于 2016-12-08 22:06:18
有许多方法可以设置它，具体取决于您所说的“标签”是什么。
我假设你指的是本例中的x轴标签。
完成此操作的一种简单方法是向x轴提供类别名称，如下所示：
xAxis: {
crosshair: true,
categories: ['Tokyo', 'New York']
}然后简化你的系列结构，如下所示：
series: [{
name: 'Rainfall',
data: [49.9, 83.6]
}]小提琴：
- http://jsfiddle.net/jlbriggs/ks7g1bo9/2/
为了保持示例中的颜色设置，您可以使该系列变得更复杂，如下所示：
xAxis: {
crosshair: true,
type: 'category'
},
series: [{
name: 'Rainfall',
data: [{
name: 'Tokyo',
y: 49.9,
color: Highcharts.getOptions().colors[0]
}, {
name: 'New York',
y: 83.6,
color: Highcharts.getOptions().colors[1]
}]
}]小提琴：
- http://jsfiddle.net/jlbriggs/ks7g1bo9/1
这只是众多设置方法中的两种，具体哪种方法取决于您具体需要什么。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41034226
复制相关文章
相似问题
腾讯云开发者
