如何在Highcharts中使HTML表中的每一行成为饼状图
How do I make each row in a HTML table a pie chart in Highcharts?
例如，我的表是这样的:
agree neutral disagree
q1 10 4 4
q2 16 1 1
q3 18 0 0
q4 15 2 1
q5 13 5 0
和我想把第一季度做成一个饼状图，同意、中性和不同意作为不同的部门，第二季度、第三季度也是如此。
<script type="text/javascript">
$(function () {
var chart;
$('#container').highcharts({
data: {
table: document.getElementById('datatable')
},
chart: {
type: 'column'
},
title: {
text: ''
},
yAxis: {
allowDecimals: false,
title: {
text: 'Persons'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.point.y +' individuals said '+ this.point.name.toLowerCase();
}
},
});
});
/**********************************************
**********************************************/
$(function () {
var chart;
$('#container2').highcharts({
data: {
table: document.getElementById('datatable')
},
chart: {
type: 'pie'
},
title: {
text: ''
},
yAxis: {
allowDecimals: false,
title: {
text: 'Persons'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.point.y +' individuals said '+ this.point.name.toLowerCase();
}
},
});
});
/**********************************************/
/**********************************************/
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container3',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: {
text: ''
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
},
legend: {
enabled:true
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size: '50%',
dataLabels: {
enabled: false
}
}
},
series:
[
{
type: 'pie',
name: 'testname1',
center: [70, 140],//+130 to the x-axis
showInLegend:true,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
}
,{
type: 'pie',
name: 'testname2',
center: [200, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
},
{
type: 'pie',
name: 'testname3',
center: [330, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
},
{
type: 'pie',
name: 'testname4',
center: [460, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
},
{
type: 'pie',
name: 'testname5',
center: [590, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
},
{
type: 'pie',
name: 'testname6',
center: [720, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
},
{
type: 'pie',
name: 'testname7',
center: [850, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
},
{
type: 'pie',
name: 'testname8',
center: [980, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
}
]
},function(chart) {
$(chart.series[0].data).each(function(i, e) {
e.legendItem.on('click', function(event) {
var legendItem=e.name;
event.stopPropagation();
$(chart.series).each(function(j,f){
$(this.data).each(function(k,z){
if(z.name==legendItem)
{
if(z.visible)
{
z.setVisible(false);
}
else
{
z.setVisible(true);
}
}
});
});
});
});
});
});
});
</script>
注意:第一个图表成功地从我正在使用的表中提取数据。
另外两个是我试图回答我的问题。
下面是我发布的代码的结果:
http://tinypic.com/r/11uyj3s/8示例:http://jsfiddle.net/4Kn5t/
您需要为每个图表设置三个额外的选项，以告诉哪些行应该用于饼状图:
$('#container2').highcharts({
data: {
table: document.getElementById('datatable'),
switchRowsAndColumns: true, // use rows as points
startRow: 1,
endRow: 2 // use row == 2
},
chart: {
type: 'pie'
},
title: {
text: 'Data extracted from a HTML table in the page'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.point.y +' '+ this.point.name.toLowerCase();
}
}
});
相关文章：
- 在Web应用程序中使用Highcharts javascript
- 拆分文本以每隔n个字符添加一行新行，并注意空格
- 动态插入的表:JQuery未检测到最后一行
- 在Highcharts中，我们可以通过任何方式在渲染图表之前获得plotWidth和plotHeight
- HighCharts长标题文本在某些元素上重叠
- 在终端中运行 JavaScript 时(使用 rhino），如何使用 print(） 函数在一行中打印
- 如何在Angular UI网格中选择下一行
- Highcharts colorsByPoint与系列中的线性渐变一起使用时不起作用
- 通过单击动态加载的表中同一行的另一个字段来更新一行的字段
- Highcharts-如何在自定义格式化程序中获得默认的y轴标签格式化程序
- Highcharts仪表未显示
- Highcharts-图表外的图例定位
- Highcharts动态烛台
- 在highcharts.js中向点弹出窗口动态添加文本
- Highcharts 3d调整zindex错误
- Jquery幻灯片以一行左侧的图像开始，但我希望它从右端开始
- 如何在一页上显示多个Highcharts图表
- 从重复的javascript数组结果集中只获取一行
- 在GridView中，当单击复选框时，在网格的同一行中使用JavaScript将标签中的值添加到TextBox
- 如何在Highcharts中使HTML表中的每一行成为饼状图
