是否可以在水平条jsHighchart中将类别显示在系列上方
Is it possible to have the category displayed above the series in a horizontal bar jsHighchart?
是否可以在水平条jsHighchart中将类别显示在系列上方?
我知道如果您每个类别仅使用 1 个系列,这是可能的。但我想知道在使用多个系列时这是否也可行。
我现在有什么:
$(function () {
var cats = ['1', '2', '3', '4', '5'];
var width = 375;
var height = cats.length * 100;
var value = 0;
var maxScore = 2453 + 50;
var chart = $('.highchart').highcharts({
chart: {
backgroundColor:'#fff',
type: 'bar',
width:width,
height:height,
},
title: {
text: ''
},
credits: {
enabled: false
},
exporting: { enabled: false },
legend: {
enabled: false
},
scrollbar: {
enabled: false
},
xAxis: {
categories: cats,
labels: {
style: {
display:'block',
fontWeight: 'bold',
}
},
min:0,
},
yAxis: {
/* stackLabels: {
formatter: function() {
return this.axis.chart.xAxis[0].categories[this.x];
},
enabled: true,
verticalAlign: 'top',
align: 'left',
y: -5
},*/
allowDecimals: false,
min: 0,
max: maxScore,
gridLineWidth: 0,
title: {
text: '',
rotation:0,
margin:0
},
labels: {
formatter: function () {
return '';
},
},
},
tooltip: {
enabled:false,
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: { bar:{borderWidth:0, dataLabels:{align:'right'}},series: { pointWidth: 25, pointPadding: 0, groupPadding: 0.24} },
series: [{
name: 'score1',
data: [800, 1312, 833, 944, 432],
stack: 'you',
color: 'blue',
dataLabels: {
enabled: true,
color: 'blue',
align: 'center',
x: 25,
y: 0,
style: {
fontSize: '13px',
fontWeight: 'bold',
},
useHTML: true
}
}, {
name: 'score2',
data: [2208, 800, 1375, 1531, 971],
stack: 'academy',
color: 'red',
dataLabels: {
enabled: true,
color: 'red',
align: 'center',
x: 25,
y: 0,
style: {
fontSize: '13px',
fontWeight: 'bold',
},
useHTML: true
}
}],
});
$hc = $('.highchart');
});
http://jsfiddle.net/jbw8ou5g/
这个想法是从柱线留下 1,2,3,4,5,但在相应的柱上方。
试试这个伙伴。将 x 轴属性替换为以下内容
xAxis: {
categories: cats,
labels: {
style: {
display:'block',
fontWeight: 'bold',
},
x:350,
},
min:0,
},
小提琴
相关文章:
- 在Ionic'中显示JSON结果;s系列重复
- Highcharts显示系列名称,但缺少json源中的数据点
- 有问题的突出显示(悬停)一个系列,突出显示图表
- 高亮显示工具提示共享项,具体取决于Highcharts中悬停的系列
- 为什么我的addSeries(在高图表中)只显示系列的名称,而不显示实际的饼图本身
- 是否可以在水平条jsHighchart中将类别显示在系列上方
- Highcharts 单个水平堆叠条形图,始终显示数据名称(标签)和 %-年龄,并在鼠标悬停时显示数据编号和系列名称
- 在 Ext JS 4 上显示/隐藏系列的单个行元素
- Highstock 共享工具提示多个系列 - 不在点时显示线条的数据
- DevExpress ChartJS在点击时显示系列标签
- 在ShieldUI JavaScript图表上显示具有不同dataStart属性的两个系列
- 谷歌可视化散点图只显示最后一个系列的工具提示
- 谷歌图表如何隐藏动态创建的系列,并只显示图例中的一个
- Google图表API集合选择要突出显示的系列
- 在绘图/加载开始时,仅在高位图表中显示一个系列数据
- 突出显示多个数据系列
- 突出显示一个系列中的一个条形图
- 将Highchart系列水平显示在彼此下方
- 从远程元素突出显示高图表系列
- Highcharts试图隐藏/显示系列