我正在尝试将dict中包含的数据拆分为多个图表。每个图表都有两个系列:列和标记。如果在单个图表中表示所有数据,一切正常,但如果我尝试拆分它,列和标记由于某种原因不会对齐
function setup_chart(chart_container){
return new Highcharts.chart(chart_container, {
chart: {
alignTicks: false,
type: 'columnrange',
inverted: true,
zoomType: 'y',
panning: true,
},
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: [],
className: 'chart-axis-title',
title: {
align:'high'
},
offset: -10
},
navigation: {
buttonOptions: {
x: 5,
y: -12
}
},
yAxis:[{
minRange: 1,
max:null,
min:null,
allowDecimals: false,
title: {
text: 'Days'
},
labels:{
formatter:function(){
if(this.value !=0){
return this.value;
}
}
}
},{
tickPositions: [0, 100],
visible: false
}],
tooltip: {
},
exporting: {
scale: 3,
chartOptions: {
legend: {
enabled: true
}
}
},
legend: {
enabled: false
},
series: [{
yAxis: 1,
data:[]
},{
name: 'Days',
data: [],
stickyTracking: true
}]
});
}
我通过jinja2传递数据,并按以下方式填充图表:
var options_data_cm = {{options|tojson|safe}}[k]['cms'];
var cm_groups = {{cm_group_dict}};
var cms_details = {};
for(var key in cm_groups){
cms_details[key] = {
"data":[],
"left":[],
"right":[],
"cols":[],
"categories":[]
}
}
for(var key in cms_details){
var crtChart = $('#'+key).highcharts();
crtChart.xAxis[0].update({title:{ text: ""+cm_groups[key] }});
crtChart.addSeries({
type: 'column',
yAxis: 1,
data: cms_details[key]['cols'],
zIndex: 1,
minPointLength: 10,
threshold: -0.1,
pointPadding: 0,
pointRange: 0,
groupPadding: 0,
showInLegend: false,
tooltip: {
pointFormat: false
},
states: {
hover: {
enabled: false
}
}
});
crtChart.addSeries({
name: "Study Days",
dataLabels: {
enabled: false,
padding: 10,
borderWidth: 0,
useHTML:false,
formatter:function(){
if(this.y != 0)
return this.y;
}
},
stickyTracking: false,
data: cms_details[key]['data'],
borderWidth: 0,
zIndex: 5,
maxPointWidth: 5,
tooltip:{
followPointer:true
},
point: {
events: {
click: function() {
if (url != "")
window.open(url,'_blank');
}
}
}
});
crtChart.addSeries({
type:'scatter',
stickyTracking:false,
tooltip:{snap:0},
data:cms_details[key]['left'],
zIndex: 1
});
crtChart.addSeries({
type:'scatter',
stickyTracking:false,
tooltip:{snap:0},
data:cms_details[key]['right'],
zIndex: 1
});
crtChart.xAxis[0].setCategories(cms_details[key]['categories']);
}
这是两张图片,第一张图片是在不将数据分成多个图表的情况下进行分配,第二张图片是试图将其拆分:
我已经尝试检查数据的内容,从某种意义上说两者具有相同的坐标似乎没问题,但它们会被移动。
编辑:
以下是jsfiddle
的链接答案 0 :(得分:0)
我设法通过将pointPlacement: 0.2
添加到被替换的系列中来解决问题。