javascript - Highcharts 结合了来自 html 数据表的柱形图和样条图

Question

是否可以在基于 html 表格的 HighCharts 图表中将第一个系列显示为列，将第二个系列显示为样条？

例如。以下链接： 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>

谢谢，

标记

Answer 1

在配置中，设置系列选项，以便第一个是column，第二个是spline：

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

在这里更新小提琴。

Answer 2

如果您加载插件，这是不可能的，但您可以准备自己的解析器，它将点（从表）推送到正确的系列。