Highcharts xrange 样式
Highcharts xrange styling
我想像下面这样显示我的图表。为此,我使用了 'xrange' 类型的图表。我正在尝试为每个数据点显示一个事件,其中将有一个开始数据和一个结束日期。
到目前为止,我能够使用 xrange 类型创建此图表,但无法获得如上图所示的精确显示。
下面是我的代码,
Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: ''
},
xAxis: {
visible: false
},
yAxis: {
visible: false
},
legend: {
enabled: false
},
series: [{
name: '',
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
color: 'rgba(230, 141, 11, 0.5)',
pointWidth: 10
}, {
x: Date.UTC(2014, 10, 26),
x2: Date.UTC(2014, 11, 5),
color: 'rgba(228, 53, 70, 0.5)',
y: 0,
pointWidth: 10
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 10),
color: 'rgba(40, 167, 69, 0.5)',
y: 0,
pointWidth: 10
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
color: 'rgba(40, 147, 164, 0.5)',
y: 0,
pointWidth: 10
}],
dataLabels: {
enabled: false
}
}]
});
@import 'https://code.highcharts.com/css/highcharts.css';
#container {
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<div id="container"></div>
有没有办法改变我在 highchart 中的实现以获得像上面那样的输出?
您可以为点设置透明颜色并使用边框颜色来达到想要的效果。使用xAxis
在系列下添加黑线。
xAxis: {
visible: true,
tickLength: 0,
lineWidth: 6,
lineColor: '#000',
labels: {
enabled: false
}
},
series: [{
borderWidth: 6,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
color: 'transparent',
borderColor: 'rgba(230, 141, 11, 0.5)'
}, ...],
...
}]
现场演示: http://jsfiddle.net/BlackLabel/8p0weh7s/
API参考:
https://api.highcharts.com/highcharts/series.xrange.borderColor
我想像下面这样显示我的图表。为此,我使用了 'xrange' 类型的图表。我正在尝试为每个数据点显示一个事件,其中将有一个开始数据和一个结束日期。
到目前为止,我能够使用 xrange 类型创建此图表,但无法获得如上图所示的精确显示。 下面是我的代码,
Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: ''
},
xAxis: {
visible: false
},
yAxis: {
visible: false
},
legend: {
enabled: false
},
series: [{
name: '',
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
color: 'rgba(230, 141, 11, 0.5)',
pointWidth: 10
}, {
x: Date.UTC(2014, 10, 26),
x2: Date.UTC(2014, 11, 5),
color: 'rgba(228, 53, 70, 0.5)',
y: 0,
pointWidth: 10
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 10),
color: 'rgba(40, 167, 69, 0.5)',
y: 0,
pointWidth: 10
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
color: 'rgba(40, 147, 164, 0.5)',
y: 0,
pointWidth: 10
}],
dataLabels: {
enabled: false
}
}]
});
@import 'https://code.highcharts.com/css/highcharts.css';
#container {
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<div id="container"></div>
有没有办法改变我在 highchart 中的实现以获得像上面那样的输出?
您可以为点设置透明颜色并使用边框颜色来达到想要的效果。使用xAxis
在系列下添加黑线。
xAxis: {
visible: true,
tickLength: 0,
lineWidth: 6,
lineColor: '#000',
labels: {
enabled: false
}
},
series: [{
borderWidth: 6,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
color: 'transparent',
borderColor: 'rgba(230, 141, 11, 0.5)'
}, ...],
...
}]
现场演示: http://jsfiddle.net/BlackLabel/8p0weh7s/
API参考:
https://api.highcharts.com/highcharts/series.xrange.borderColor