Highcharts结合了html数据表中的列和样条图

时间:2013-08-28 13:03:07

标签: javascript jquery highcharts dotnethighcharts

是否有可能将第一个系列显示为列,第二个系列显示为样条 - 在基于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>

谢谢,

标记

2 个答案:

答案 0 :(得分:1)

在配置中,设置系列选项,使第一个为column,第二个为spline

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

更新小提琴here

enter image description here

答案 1 :(得分:0)

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