在显示四个序列的高图表柱图中的第二个和第三个序列之间添加间隙
Add a gap between the second and third series in a Highcharts column plot with four series displayed
我有一个显示四个系列的高图表列图。
我希望系列一和系列二相互接触(两个蓝色的),然后有一个小间隙,然后让系列三和四相互接触(橙色的)。这能做到吗?
我还没有找到自己做的方法,也无法在这里或通过在谷歌上搜索找到示例。有人能够提供任何建议吗?
$(function() {
var chart;
var defaultTitle = "CT doses";
var protocolNames = ['Abdomen', 'Chest', 'Sinus'];
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
drilldown: function(e) {
parentSeriesIndex = e.point.series.index;
parentSeriesName = e.point.series.name;
chart.setTitle({
text: ''
});
chart.yAxis[0].setTitle({
text: 'Number'
});
if (parentSeriesName.indexOf('DLP') != -1) {
chart.xAxis[0].setTitle({
text: 'DLP range (mGy.cm)'
});
}
if (parentSeriesName.indexOf('CTDI') != -1) {
chart.xAxis[1].setTitle({
text: 'CTDI range (mGy)'
});
}
chart.xAxis[0].setCategories([], true);
chart.tooltip.options.formatter = function(args) {
if (this.series.name.indexOf('DLP') != -1) {
returnValue = this.y.toFixed(0) + ', DLP series' + ', ' + this.x;
} else {
returnValue = this.y.toFixed(0) + ', CTDI series' + ', ' + this.x;
}
return returnValue;
};
chart.yAxis[1].update({
labels: {
enabled: false
},
title: {
text: null
}
});
},
drillup: function(e) {
chart.setTitle({
text: defaultTitle
}, {
text: ''
});
chart.yAxis[0].setTitle({
text: 'DLP (mGy.cm)'
});
chart.yAxis[1].setTitle({
text: 'CTDIvol (mGy)'
});
chart.xAxis[0].setTitle({
text: ''
});
chart.xAxis[1].setTitle({
text: ''
});
chart.xAxis[0].setCategories(protocolNames, true);
chart.xAxis[0].update({
labels: {
rotation: 90
}
});
chart.yAxis[1].update({
labels: {
enabled: true
},
title: {
text: 'CTDIvol (mGy)'
}
});
}
}
},
title: {
text: 'CT doses'
},
xAxis: [{
title: {
useHTML: true
},
type: "category",
labels: {
useHTML: true,
rotation: 90
}
}, {
title: {
useHTML: true
},
type: "category",
opposite: true,
labels: {
useHTML: true,
rotation: 90
}
}],
yAxis: [{
min: 0,
title: {
text: 'DLP (mGy.cm)'
}
}, {
title: {
text: 'CTDIvol (mGy)'
},
opposite: true
}],
legend: {
align: 'center',
verticalAlign: 'top',
floating: true,
borderWidth: 0,
y: 70
},
tooltip: {},
plotOptions: {
column: {
borderWidth: 0,
groupPadding: 0.2,
pointPadding: 0
}
},
series: [{
name: 'Mean DLP',
color: '#2b8cbe',
data: [{
name: 'Abdomen',
y: 150,
drilldown: 'AbdomenDLP'
}, {
name: 'Chest',
y: 73,
drilldown: 'ChestDLP'
}, {
name: 'Sinus',
y: 20,
drilldown: 'SinusDLP'
}],
tooltip: {
valueSuffix: ' mGy.cm'
}
}, {
name: 'Median DLP',
color: '#7bccc4',
data: [{
name: 'Abdomen',
y: 140,
drilldown: 'AbdomenDLP'
}, {
name: 'Chest',
y: 63,
drilldown: 'ChestDLP'
}, {
name: 'Sinus',
y: 15,
drilldown: 'SinusDLP'
}],
tooltip: {
valueSuffix: ' mGy.cm'
}
}, {
name: 'Mean CTDI',
color: '#d7301f',
data: [{
name: 'Abdomen',
y: 57.2,
drilldown: 'AbdomenCTDI'
}, {
name: 'Chest',
y: 25.8,
drilldown: 'ChestCTDI'
}, {
name: 'Sinus',
y: 43.4,
drilldown: 'SinusCTDI'
}],
tooltip: {
valueSuffix: ' mGy'
},
yAxis: 1
}, {
name: 'Median CTDI',
color: '#fdcc8a',
data: [{
name: 'Abdomen',
y: 52.2,
drilldown: 'AbdomenCTDI'
}, {
name: 'Chest',
y: 20.8,
drilldown: 'ChestCTDI'
}, {
name: 'Sinus',
y: 38.4,
drilldown: 'SinusCTDI'
}],
tooltip: {
valueSuffix: ' mGy'
},
yAxis: 1
}],
drilldown: {
series: [{
name: 'Abdomen DLP',
id: 'AbdomenDLP',
data: [
['up to 150', 4],
['up to 200', 2],
['up to 250', 1],
['up to 300', 2],
['up to 350', 1]
]
}, {
name: 'Chest DLP',
id: 'ChestDLP',
data: [
['up to 100', 40],
['up to 110', 21],
['up to 120', 24],
['up to 130', 32],
['up to 140', 64]
]
}, {
name: 'Sinus DLP',
id: 'SinusDLP',
data: [
['up to 130', 4],
['up to 140', 2],
['up to 150', 6],
['up to 160', 7],
['up to 170', 9]
]
}, {
name: 'Abdomen CTDI',
id: 'AbdomenCTDI',
xAxis: 1,
data: [
['up to 20', 4],
['up to 22', 9],
['up to 24', 12],
['up to 26', 8],
['up to 28', 2]
]
}, {
name: 'Chest CTDI',
id: 'ChestCTDI',
xAxis: 1,
data: [
['up to 10', 4],
['up to 12', 9],
['up to 14', 12],
['up to 16', 8],
['up to 18', 2]
]
}, {
name: 'Sinus CTDI',
id: 'SinusCTDI',
xAxis: 1,
data: [
['up to 14', 4],
['up to 16', 9],
['up to 18', 12],
['up to 20', 8],
['up to 22', 2]
]
}]
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://highslide-software.github.io/export-csv/export-csv.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
您需要
将pointPlacement
选项与数字值一起使用。例如:http://jsfiddle.net/9phfzewj/34/
玩弄价值观,就我而言,这些价值观-0.1
左派,0.1
右派。只要启用series.grouping
,pointPlacement
就会引用上一个系列位置。
相关文章:
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 如何使用PHP和JS级联三个下拉列表
- 灯光问题(使用三个.js)
- 在三个.js中创建球体(例如地球)的磁力线
- 什么'这是从第三个函数上的async 1st函数获得结果的更好方法
- javascript第三个XMLHttpRequest被拒绝.但前两个是允许的
- 将循环中的两个文本框相乘,并在第三个文本框上显示结果
- 根据前两个下拉ID显示第三个下拉列表
- 在数组JS中查找三个重复项
- Meteor和S3:如何通过一次上传/编辑定义三个不同的图像
- 如何替换javascript字符串中的前三个连字符
- 保存两个模型(属于第三个模型)和一个提交
- 将文本字段限制为三个数字
- 三个js键盘旋转
- 匹配三个正则表达式中的任意一个,以先到的为准(在javascript中)
- 加载模型与三个.js
- 如何在三个潜水之间切换?可能与jquery解决方案
- 抓住方括号之间的第三个片段
- 使用jquery's . replacewith在三个标头之间旋转
- 在显示四个序列的高图表柱图中的第二个和第三个序列之间添加间隙