我有一个显示 four series 的 Highcharts 柱状图.
我希望系列一和二相互接触(两个蓝色的),然后有一个小间隙,然后系列三和四相互接触(橙色的)。这可以做到吗?
我自己还没有找到一种方法,也无法在此处或通过 Google 搜索找到示例。有没有人可以提供任何建议?
$(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 就会引用之前的系列位置。
关于javascript - 在显示四个系列的 Highcharts 柱状图中的第二个和第三个系列之间添加间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30968626/
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。
当我使用Bundler时,是否需要在我的Gemfile中将其列为依赖项?毕竟,我的代码中有些地方需要它。例如,当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试,但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/4758609/
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
我有一个ModularSinatra应用程序,我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件,包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式,但它
我构建了两个需要相互通信和发送文件的Rails应用程序。例如,一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情,所以我什至不知道从哪里开始。任何帮助,将不胜感激。谢谢! 最佳答案 无论Rails是什么,几乎所有Web应用程序都有您的要求,大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去,网站不应直接访问彼此
我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作),这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以
这里是Ruby新手。完成一些练习后碰壁了。练习:计算一系列成绩的字母等级创建一个方法get_grade来接受测试分数数组。数组中的每个分数应介于0和100之间,其中100是最大分数。计算平均分并将字母等级作为字符串返回,即“A”、“B”、“C”、“D”、“E”或“F”。我一直返回错误:avg.rb:1:syntaxerror,unexpectedtLBRACK,expecting')'defget_grade([100,90,80])^avg.rb:1:syntaxerror,unexpected')',expecting$end这是我目前所拥有的。我想坚持使用下面的方法或.join,
所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择
我试图在索引页中创建一个超链接,但它没有显示,也没有给出任何错误。这是我的index.html.erb代码。ListingarticlesTitleTextssss我检查了我的路线,我认为它们也没有问题。PrefixVerbURIPatternController#Actionwelcome_indexGET/welcome/index(.:format)welcome#indexarticlesGET/articles(.:format)articles#indexPOST/articles(.:format)articles#createnew_articleGET/article