将条形图转换为柱形图
岳高明
问题内容：
问题答案：
这是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>
类似资料：
-
柱形图包括柱状图和条形图。 柱状图是用竖直的柱子来展现数据，一般用于展现横向的数据变化及对比。 条形图是用横向的柱子来展现数据，一般用于纵向的数据排名及对比。 一、柱状图 图4-7 Highcharts 柱状图 柱状图相关的配置参考 API 文档： 柱状图配置：针对当前数据列有效 柱状数据列配置 ：针对当前页面的所有柱状数据列有效 二、条形图 条形图其实就是 X、Y 轴对调的柱状图，在 Highc
-
我的目标是使图像圆形并显示它。如果图像是方形的，那么我可以通过简单地使用CSS的属性将其转换为圆形。但是当图像是矩形时，使用这个CSS属性会给我椭圆形的图像。 剪辑的部分是不可见的，但仍然存在。所以即使现在我也在尝试使用属性，它给我椭圆形图像，右侧和左侧被剪辑。 我有什么办法可以解决这个问题吗？
-
柱状/条形图提供了一种以竖线表示数据值的显示方式。用来显示数据趋势，并排比较多个数据集。 new Chart(document.getElementById("chartjs-1"),{"type":"bar","data":{"labels":["January","February","March","April","May","June","July"],"datasets":[{"labe
-
本章节我们将为大家介绍几种柱形图的类型。 序号 图表类型 1 基本柱形图 2 反向柱形图 3 堆叠柱形图 4 堆叠组柱形图 5 按百分比堆叠柱形图 6 标签旋转柱形图 7 向下钻取柱形图 8 固定布局柱形图 9 使用 html 表格数据的柱形图 10 区间柱形图
-
Highcharts 柱形图 以下实例演示了标签旋转柱形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 dataLabels 中添加 rotation 属性： 配置 dataLabels : 数据标签 dataLabels 定义图上是否显示数据标签。 文本旋转程度由 rotation 属性决定。我们还可以通过其他属性来定义文本标签的背景，间隔
-
我的代码 这是当前折线图的样子: