Javascript Highcharts结合了html数据表中的柱形图和样条曲线图

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

下面的链接：-显示了两个数据系列，但都是列。如何更改下面的代码，将第一个显示为列，第二个显示为样条线

$(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>

$（函数（）{
$（“#容器”）。高图({
数据：{
表：document.getElementById（'datatable'）
},
图表：{
类型：“列”
},
标题：{
text:“从页面中的HTML表提取的数据”
},
亚克斯：{
allowDecimals:false，
标题：{
文本：“单位”
}
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
this.y+“”+this.x.toLowerCase（）；
}
}
});
});
简
约翰
苹果
3.
4.
梨
2.
0
李子
5.
11
香蕉
1.
1.
橘子
2.
4.

谢谢,

---

标记以防加载插件时，这是不可能的，但您可以准备自己的解析器，将点（从表中）推送到正确的序列中。

在配置中，设置序列选项，使第一个是

列

，第二个是

样条线

：

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

更新小提琴