2013-08-28 3 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'}] 

Update скрипка here.

enter image description here

0

В случае, когда вы загрузите плагин, это невозможно, но вы можете подготовить свой собственный парсер, который будет толкать точки (из таблицы) для правильной серии ,