将自定义标签添加到Highcharts中的轴 [英] Add Custom Labels to Axes in Highcharts
问题描述
我的应用程序中有一个Highchart，显示每个月的汽车销量.给定用户输入的日期值，图表应显示最近12个月的汽车销量.如果用户过滤日期为2018-09-10，则应显示2017年9月，2017年10月，2017年11月，2017年12月，2018年1月，2018年2月，2018年3月，2018年4月，5月的汽车销量-2018年6月2018年7月2018年8月2018年9月2018年10月2018年11月2018年12月
此外，我还需要在图表本身中显示年份分隔.我找到了与之类似的图像，.我的图表中也需要类似的内容.有什么办法可以做到吗?
以下小提琴包含示例代码.我需要显示2017年和2018年的年份分隔.
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Car Sales'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent Car Sales'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
"series": [
{
"name": "Car Sales",
"colorByPoint": true,
"data": [
{
"name": "July",
"y": 62.74
},{
"name": "August",
"y": 62.74
},{
"name": "September",
"y": 62.74
},{
"name": "October",
"y": 62.74
},{
"name": "November",
"y": 62.74
},{
"name": "December",
"y": 62.74
},{
"name": "January",
"y": 62.74
},
{
"name": "February",
"y": 10.57
},
{
"name": "March",
"y": 7.23
},
{
"name": "April",
"y": 5.58
},
{
"name": "May",
"y": 4.02
},
{
"name": "June",
"y": 1.92
},
{
"name": "July ",
"y": 7.62
}
]
}
]
});
https://jsfiddle.net/yasirunilan/8xvjcd5h/1/
您可以使用Highcharts.SVGRenderer创建带有年份的分隔线和文本.如果您在xAxis上始终有类别，则可以通过以下方式做到这一点:
function renderSeparator(xVal, chart, year) {
var xAxis = chart.xAxis[0],
pxVal = xAxis.toPixels(xVal + 0.5);
chart.renderer.path([
'M', pxVal, chart.plotTop,
'L', pxVal, chart.plotTop + chart.plotHeight
]).attr({
stroke: 'black',
'stroke-width': 1
}).add();
chart.renderer.text(
year, pxVal + 10, 70
).css({
color: 'black',
fontSize: 20
}).attr({
zIndex: 6
}).add();
}
// Create the chart
Highcharts.chart('container', {
chart: {
events: {
render: function() {
var chart = this,
xAxis = chart.xAxis[0],
year = 2014;
chart.renderer.text(year, chart.plotLeft + 10, 70)
.css({
color: 'black',
fontSize: 20
})
.attr({
zIndex: 6
})
.add();
year++;
Highcharts.each(xAxis.names, function(el, i) {
if (el === "December") {
renderSeparator(i, chart, year);
year++;
}
});
}
},
type: 'column'
},
...
});
实时演示: https://jsfiddle.net/BlackLabel/0ma6efcz/
API参考: https://api.highcharts.com/class- reference/Highcharts.SVGRenderer#text
I have a Highchart in my application showing car sales in each month. Given a user input value for a date, chart should show car sales in last 12 months. If user filter date is 2018-09-10, it should show car sales of Sep-2017, Oct-2017, Nov-2017, Dec-2017, Jan-2018, Feb-2018, Mar-2018, Apr-2018, May-2018, Jun-2018, Jul-2018, Aug-2018, Sep-2018, Oct-2018, Nov-2018, Dec-2018.
And also I need to show a year separation in the chart itself. I found an image similar to it, . I need something like it in my chart also. Is there any way that I can do it?
The following fiddle contains a sample code. I need to show the year separation of 2017 and 2018.
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Car Sales'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent Car Sales'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
"series": [
{
"name": "Car Sales",
"colorByPoint": true,
"data": [
{
"name": "July",
"y": 62.74
},{
"name": "August",
"y": 62.74
},{
"name": "September",
"y": 62.74
},{
"name": "October",
"y": 62.74
},{
"name": "November",
"y": 62.74
},{
"name": "December",
"y": 62.74
},{
"name": "January",
"y": 62.74
},
{
"name": "February",
"y": 10.57
},
{
"name": "March",
"y": 7.23
},
{
"name": "April",
"y": 5.58
},
{
"name": "May",
"y": 4.02
},
{
"name": "June",
"y": 1.92
},
{
"name": "July ",
"y": 7.62
}
]
}
]
});
https://jsfiddle.net/yasirunilan/8xvjcd5h/1/
You can use Highcharts.SVGRenderer to create separator line and text with year. If you always have categories on the xAxis, you can do it in this way:
function renderSeparator(xVal, chart, year) {
var xAxis = chart.xAxis[0],
pxVal = xAxis.toPixels(xVal + 0.5);
chart.renderer.path([
'M', pxVal, chart.plotTop,
'L', pxVal, chart.plotTop + chart.plotHeight
]).attr({
stroke: 'black',
'stroke-width': 1
}).add();
chart.renderer.text(
year, pxVal + 10, 70
).css({
color: 'black',
fontSize: 20
}).attr({
zIndex: 6
}).add();
}
// Create the chart
Highcharts.chart('container', {
chart: {
events: {
render: function() {
var chart = this,
xAxis = chart.xAxis[0],
year = 2014;
chart.renderer.text(year, chart.plotLeft + 10, 70)
.css({
color: 'black',
fontSize: 20
})
.attr({
zIndex: 6
})
.add();
year++;
Highcharts.each(xAxis.names, function(el, i) {
if (el === "December") {
renderSeparator(i, chart, year);
year++;
}
});
}
},
type: 'column'
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/0ma6efcz/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
这篇关于将自定义标签添加到Highcharts中的轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
