JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 300px"></div>
<table id="datatable">
<tbody>
<tr>
<th>Имя</th>
<th>График</th>
<th>Товар план</th>
<th>Товар факт</th>
<th>Зарплата (план)</th>
<th>Зарплата (факт)</th>
</tr>
<tr>
<th>Иванов</th>
<td>20</td>
<td>10</td>
<td>15</td>
<td>25000</td>
<td>31000</td>
</tr>
<tr>
<th>Петров</th>
<td>20</td>
<td>10</td>
<td>15</td>
<td>38500</td>
<td>26000</td>
</tr>
<tr>
<th>Сидоров</th>
<td>20</td>
<td>10</td>
<td>15</td>
<td>18500</td>
<td>17000</td>
</tr>
</tbody>
</table>
JavaScript
Highcharts.visualize = function(table, options) {
options.xAxis.categories = [];
options.series = [];
$('tr', table).each(function(i) {
var tr = this;
if (i === 0) {
$('th', tr).each(function(j) {
var str = this.innerHTML;
if ( j > 3) {
options.series.push({
name: str,
data: []
});
}
});
}
else {
$('th', tr).each(function(j) {
options.xAxis.categories.push(this.innerHTML);
});
$('td', tr).each(function(j) {
if(j < 3) return true;
j-=3;
options.series[j].data.push(parseInt(this.innerHTML));
});
}
});
var chart = new Highcharts.Chart($.extend({},options));
}
$(document).ready(function() {
var table = document.getElementById('datatable'),
options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Сравнительная таблица'
},
xAxis: {},
yAxis: {
title: {
text: 'Зарплата'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' + this.y + ' ' + ' рублей';
}
}
};
Highcharts.visualize(table, options);
});