-2
各バーのためのプロットバンド：Highchart、私は私が見つけた次のコードのようにややhighchartでデザインを表示する必要が
//-------------------------------------------------------
Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
return ['M',x ,y + width/2,'L',x+height,y + width/2];
};
//-------------------------------------------------------
Highcharts.setOptions({
chart:{
type:'column',
inverted:false,
},
credits:{enabled:false},
exporting:{enabled:false},
legend:{enabled:false},
title:{text:''},
xAxis:{
tickLength:0,
lineColor:'#999',
lineWidth:1,
labels:{style:{fontWeight:'bold'}}
},
yAxis:{
min:0,
minPadding:0,
maxPadding:0,
tickColor:'#ccc',
tickWidth:1,
tickLength:3,
gridLineWidth:0,
endOnTick:true,
title:{text: ''},
labels:{
y:10,
style:{
fontSize:'8px'
},
formatter:function(){
if (this.isLast){
return this.value + ' %';
}
else{
return this.value;
}
}
}
},
tooltip:{
enabled:true,
backgroundColor:'rgba(255, 255, 255, .85)',
borderWidth:0,
shadow:true,
style:{fontSize:'10px',padding:2},
formatter:function() {
return this.series.name + ": <strong>" + Highcharts.numberFormat(this.y,2) + "</strong>";
}
},
plotOptions:{
column:{
color:'#000',
shadow:false,
borderWidth:0,
},
scatter:{
marker:{
symbol:'line',
lineWidth:3,
radius:8,
lineColor:'#000'
}
}
}
});
//-------------------------------------------------------
var chart1 = new Highcharts.Chart({
chart:{renderTo:'container1'},
xAxis:{categories:['Title 1']},
yAxis:{
max:100,
labels:{y:10,style:{fontSize:'8px'}},
plotBands:[{from:0,to:70,color: 'rgba(103,103,103,.35)'},
{from:70,to:85,color: 'rgba(153,153,153,.35)'},
{from:85,to:100,color: 'rgba(204,204,204,.35)'}]
},
series:[{name:'Measure',pointWidth:10,data:[80]},
{name:'Target',type: 'scatter',data:[90],}]
});
//-------------------------------------------------------
var chart2 = new Highcharts.Chart({
chart:{renderTo:'container2'},
xAxis:{categories:['Title 2']},
yAxis:{
max:100,
labels:{y:10,style:{fontSize:'8px'}},
plotBands:[{from:0,to:75,color: 'rgba(103,103,103,.35)'},
{from:75,to:90,color: 'rgba(153,153,153,.35)'},
{from:90,to:100,color: 'rgba(204,204,204,.35)'}]
},
series:[{name:'Measure',pointWidth:10,data:[92]},
{name:'Target',type: 'scatter',data:[95],}]
});
//-------------------------------------------------------
var chart3 = new Highcharts.Chart({
chart:{renderTo:'container3'},
xAxis:{categories:['Title 3']},
yAxis:{
max:100,
labels:{y:10,style:{fontSize:'8px'}},
plotBands:[{from:0,to:50,color: 'rgba(103,103,103,.35)'},
{from:50,to:75,color: 'rgba(153,153,153,.35)'},
{from:75,to:100,color: 'rgba(204,204,204,.35)'}]
},
series:[{name:'Measure',pointWidth:10,data:[64]},
{name:'Target',type: 'scatter',data:[75],}]
});
//-------------------------------------------------------
var chart4 = new Highcharts.Chart({
chart:{renderTo:'container4'},
xAxis:{categories:['Title 4']},
yAxis:{
max:1000,
labels:{y:10,style:{fontSize:'8px'},formatter:function(){return this.value;}},
plotBands:[{from:0,to:600,color: 'rgba(103,103,103,.35)'},
{from:600,to:800,color: 'rgba(153,153,153,.35)'},
{from:800,to:1000,color: 'rgba(204,204,204,.35)'}]
},
series:[{name:'Measure',pointWidth:10,data:[970]},
{name:'Target',type: 'scatter',data:[850],}]
});
//-------------------------------------------------------
var chart5 = new Highcharts.Chart({
chart:{renderTo:'container5'},
xAxis:{categories:['Title 5']},
yAxis:{
max:500,tickInterval:100,
labels:{y:10,style:{fontSize:'8px'},formatter:function(){return this.value;}},
plotBands:[{from:0,to:300,color: 'rgba(103,103,103,.35)'},
{from:300,to:400,color: 'rgba(153,153,153,.35)'},
{from:400,to:500,color: 'rgba(204,204,204,.35)'}]
},
series:[{name:'Measure',pointWidth:10,data:[475]},
{name:'Target',type: 'scatter',data:[450],}]
});
//-------------------------------------------------------body {
font-family:helvetica, sans-serif;
font-size:.7em;
}
p {
margin:.5em 1em;
}
#container1, #container2, #container3, #container4, #container5{display:inline-block;}<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container1" style="height:auto;width:100px;"></div>
<div id="container2" style="height:auto;width:100px;"></div>
<div id="container3" style="height:auto;width:100px;"></div>
<div id="container4" style="height:auto;width:100px;"></div>
<div id="container5" style="height:auto;width:100px;"></div>このfiddle
で同じを参照してください。上記のコードは5つのチャートが別々に使用され、各チャートのバンドがあります。
しかし、それぞれのグラフの代わりに、各バーのバンドを実装する必要があります。このためのオプションがハイチャートにありますか？
これを行う1つの方法は、長方形を使用することです。私は同様の問題を解決するためにそのアプローチを使用しました。 http://api.highcharts.com/highcharts/Rendererのドキュメントやhttp://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/rendererのドキュメントを参照してください。 - 正しいチャート/。 – ewolden
私はコードをスニペットとしてあなたの質問に挿入しました。なぜなら、外部サイトではなく、質問自体に重要な要素を持つ方がよいからです。 – trincot