这是Highchart项目符号图表的示例http://jsfiddle.net/jlbriggs/LdHYt/1/ 如何将其转换为列项目符号图表？
//------------------------------------------------------- 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:'bar', margin:[5,15,10,100], }, 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:{ bar:{ 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],}] }); //-------------------------------------------------------
这是您要找的东西吗？小提琴
//------------------------------------------------------- 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>
