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>

Спасибо,

отметка


person Mark    schedule 28.08.2013    source источник


Ответы (2)


В конфиге установите параметры серии так, чтобы первый был column, а второй - spline:

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

Обновите скрипт здесь.

введите описание изображения здесь

person Mark    schedule 28.08.2013

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

person Sebastian Bochan    schedule 28.08.2013