2013-08-28 26 views
0

是否可以将第一个系列显示为列,第二个显示为样条 - 在基于HighCharts图表的HTML表中?Highcharts结合HTML数据表中的列和样条图

例如。以下链接:http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-parsed/ - 显示两个数据系列,但都是列。我如何更改下面的代码,将第一个显示为列,将第二个显示为样条线?

$(function() { 
$('#container').highcharts({ 
    data: { 
     table: document.getElementById('datatable') 
    }, 
    chart: { 
     type: 'column' 
    }, 
    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.y +' '+ this.x.toLowerCase(); 
     } 
    } 
}); 
}); 

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/data.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

<table id="datatable"> 
<thead> 
    <tr> 
     <th></th> 
     <th>Jane</th> 
     <th>John</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <th>Apples</th> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
    <tr> 
     <th>Pears</th> 
     <td>2</td> 
     <td>0</td> 
    </tr> 
    <tr> 
     <th>Plums</th> 
     <td>5</td> 
     <td>11</td> 
    </tr> 
    <tr> 
     <th>Bananas</th> 
     <td>1</td> 
     <td>1</td> 
    </tr> 
    <tr> 
     <th>Oranges</th> 
     <td>2</td> 
     <td>4</td> 
    </tr> 
</tbody> 
</table> 

谢谢

马克

回答

1

在配置,设置的一系列选项,以便第一是column,第二个是spline

series: [{type: 'column'}, 
     {type:'spline'}] 

更新小提琴here

enter image description here

0

在情况下,当你加载插件,它是不可能的,但你可以准备自己的解析器,这将推动点(表),以正确的意甲。

相关问题