我正试图在栏“D”(链接下方)上显示休息符号
它是积极的,但不是负面的。
谢谢你的帮助!
我的链接:http://jsfiddle.net/kzLon27v/1/
Highcharts:Visualized axis break
$(function () {
/**
* Extend the Axis.getLinePath method in order to visualize breaks with two parallel
* slanted lines. For each break, the slanted lines are inserted into the line path.
*/
Highcharts.wrap(Highcharts.Axis.prototype, 'getLinePath', function (proceed, lineWidth) {
var axis = this,
path = proceed.call(this, lineWidth),
x = path[1];
Highcharts.each(this.breakArray || [], function (brk) {
var y;
if (!axis.horiz) {
y = axis.toPixels(brk.from);
path.splice(3, 0,
'L', x, y - 4, // stop
'M', x + 5, y - 9, 'L', x - 5, y + 1, // lower slanted line
'M', x + 5, y - 1, 'L', x - 5, y + 9, // higher slanted line
'M', x, y + 4
);
}
});
return path;
});
/**
* On top of each column, draw a zigzag line where the axis break is.
*/
function pointBreakColumn(e) {
var point = e.point,
brk = e.brk,
shapeArgs = point.shapeArgs,
x = shapeArgs.x,
y = this.toPixels(brk.from, true),
w = shapeArgs.width,
key = ['brk', brk.from, brk.to],
path = ['M', x, y, 'L', x + w * 0.25, y + 4, 'L', x + w * 0.75, y - 4, 'L', x + w, y];
if (!point[key]) {
point[key] = this.chart.renderer.path(path)
.attr({
'stroke-width': 3,
stroke: point.series.options.borderColor
})
.add(point.graphic.parentGroup);
} else {
point[key].attr({
d: path
});
}
}
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Visualized axis break'
},
xAxis: {
categories: ['']
},
yAxis: {
lineColor: 'black',
lineWidth: 2,
title: false,
tickInterval: 1000,
breaks: [{
from: -60000,
to: -12000
}],
events: {
pointBreak: pointBreakColumn
}
},
series: [{
name: 'A',
data: [30000]
}, {
name: 'B',
data: [50000]
}, {
name: 'C',
data: [-8000]
}, {
name: 'D',
data: [-60000]
}]
});
});