我正在使用Highcharts.js
插件,一切都很好,但是我想显示的是例如以下数据:
1,5,10,20
这里的问题是,每个值都显示在一个列中,而我想要的是将所有值都显示在一个列中,所以我的问题是我该怎么做才能显示想要的图表?这是我当前的代码:
$(document).ready(function() {
$('#xd').click(function() {
draw();
});
});
function draw() {
var myArray = [];
myArray = [1, 5, 10, 11, 8];
$('#grafic').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Sampled Parts'
},
xAxis: {
categories: ['Data'],
labels: {
rotation: -33,
}
},
yAxis: {
allowDecimals: true,
min: 0,
title: {
text: 'Resultados'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
legend: {
reversed: true
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'My Data',
data: myArray
}]
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="grafic">
</div>
<button id="xd">Click</button>
如果您看到我的代码,我有5列,而我想要的是将所有值都放在一个列中,但是老实说,我不知道该怎么办。
Codepen code
最佳答案
如果要堆叠值,则需要创建多个序列(我想每个序列中都只有一个值)。从此更改:
var myArray = [];
myArray = [1, 5, 10, 11, 8];
对此:
series: [{
name: 'mydata',
data: [1]
}, {
name: 'mydata2',
data: [5]
}, {
name: 'mydata3',
data: [10]
}, {
name: 'mydata4',
data: [11]
}, {
name: 'mydata5',
data: [8]
}]
请参阅下面的运行示例:
$(document).ready(function() {
$('#xd').click(function() {
draw();
});
});
function draw() {
$('#grafic').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Sampled Parts'
},
xAxis: {
categories: ['Data'],
labels: {
rotation: -33,
}
},
yAxis: {
allowDecimals: true,
min: 0,
title: {
text: 'Resultados'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
legend: {
reversed: true
},
plotOptions: {
column: {
stacking: 'normal'
}
},
// var myArray = [];
// myArray = [1, 5, 10, 11, 8];
series: [{
name: 'mydata',
data: [1]
}, {
name: 'mydata2',
data: [5]
}, {
name: 'mydata3',
data: [10]
}, {
name: 'mydata4',
data: [11]
}, {
name: 'mydata5',
data: [8]
}]
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="grafic">
</div>
<button id="xd">Click</button>
关于javascript - 如何将数据放在一栏中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40368098/