Высокие диаграммы, объединяющие столбец и сплайн-диаграмму из таблицы данных 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>
Спасибо,
отметка
2 ответа
Решение
В конфиге установите параметры серии так, чтобы первый column
а второй spline
:
series: [{type: 'column'},
{type:'spline'}]
Обновите скрипку здесь.
В случае, когда вы загружаете плагин, это невозможно, но вы можете подготовить свой собственный анализатор, который будет выдвигать точки (из таблицы) в правильную серию.