Импорт данных из таблицы HTML в highcharts

У меня в течение нескольких дней я пытаюсь написать код с использованием высоких диаграмм. Точка кода заключается в том, что я хочу иметь возможность вводить данные в таблицу, а затем обновлять диаграммы. Я еще не добавил компонент обновления, поскольку я зациклился на получении данных из таблицы в диаграммах. Они либо полностью перестают работать, становятся прозрачными, либо исчезают части.Импорт данных из таблицы HTML в highcharts

Мой HTML:

<body> 
<table border="1" style="width:100%" id='datatable1'> 
<tr> 
<th colspan="1" style="width: 200px;"></th> 
<th colspan="1">Build 1</th> 
<th colspan="1">Build 2</th> 
</tr> 
<tr> 
<td>Power</td> 
    <td contenteditable='true' id='BP1' ><b>0</b></td> 
    <td contenteditable='true' id='BP2'><b>0</b></td> 
</tr> 
<tr> 
<td>Precision</td> 
<td contenteditable='true' id='BPr1'><b>0</b></td> 
<td contenteditable='true' id='BPr2'><b>0</b></td> 
</tr> 
<tr> 
<td>Vitality</td> 
<td contenteditable='true' id='BV1'><b>0</b></td> 
<td contenteditable='true' id='BV2'><b>0</b></td> 
</tr> 
<tr> 
<td>Toughness</td> 
<td contenteditable='true' id='BT1'><b>0</b></td> 
<td contenteditable='true' id='BT2'><b>0</b></td> 
</tr> 
</table> 

<div class="spacer" style="height: 20px;"></div>  

<table border="1" style="width:100%" class="zebra" id='datatable2'> 
<tr> 
<th colspan="1" style="width: 200px;"></th> 
<th colspan="1">Build 1</th> 
<th colspan="1">Build 2</th> 
</tr> 
<tr> 
<td>Ferocity</td> 
<td contenteditable='true' id='BF1'><b>0</b></td> 
<td contenteditable='true' id='BF2'><b>0</b></td> 
</tr> 
<tr> 
<td>Condition Damage</td> 
<td contenteditable='true' id='BC1'><b>0</b></td> 
<td contenteditable='true' id='BC2'><b>0</b></td> 
</tr> 
<tr> 
<td>Healing Power</td> 
<td contenteditable='true' id='BH1'><b>0</b></td> 
<td contenteditable='true' id='BH2'><b>0</b></td> 
</tr> 
</table> 
</body> 

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/highcharts-more.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<div id="Primary" class="chart"></div> 
<div class="spacer"style="height:20px;"></div> 
<div id="Secondary" class="chart"></div>

Причина все редактируемые ячейки имеют идентификатор, потому что моя первая мысль была направить данные в отдельной клетке, но я не смог заставить его работать.

Мои JS:

   $(function() { 

//Primary: Power, Precision, Vitality, Toughness 
//Secondary: Ferocity, Condition Damage, Healing Power 
$('#Primary').highcharts({   

    chart: { 
     backgroundColor: 'rgba(0,0,0,0)', 
     plotBorderWidth: 0, 
     plotShadow: false, 
     polar: true, 
     type: 'line' 
    }, 

    title: { 
     text: 'Primary Attributes', 
     x: -80 
    }, 

    pane: { 
     size: '100%' 
    }, 

    xAxis: { 
     categories: ['Power', 'Precision', 'Vitality', 'Toughness'], 
     tickmarkPlacement: 'on', 
     lineWidth: 0 
    }, 

    **yAxis: { 
     gridLineInterpolation: 'polygon', 
     lineWidth: 0, 
     min: 0** 
    }, 

    tooltip: { 
     shared: true, 
     pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>' 
    }, 

    legend: { 
     align: 'right', 
     verticalAlign: 'top', 
     y: 70, 
     layout: 'vertical' 
    }, 
    credits: { 
     enabled: false 
    }, 
    **series: [{ 
     name: 'Build 1', 
     data: [0, 150, 680, 600], 
     pointPlacement: 'on' 
    }, { 
     name: 'Build 2', 
     data: [100, 170, 1045, 400], 
     pointPlacement: 'on'** 
    }] 

}); 



// Chart 2 
$('#Secondary').highcharts({ 

    chart: { 
     backgroundColor: 'rgba(0,0,0,0)', 
     plotBorderWidth: 0, 
     plotShadow: false, 
     polar: true, 
     type: 'line' 
    }, 

    title: { 
     text: 'Secondary Attributes', 
     x: -80 
    }, 

    pane: { 
     size: '100%' 
    }, 

    **xAxis: { 
     categories: ['Condition', 'Healing Power', 'Ferocity'], 
     tickmarkPlacement: 'on', 
     lineWidth: 0** 
    }, 

    yAxis: { 
     gridLineInterpolation: 'polygon', 
     lineWidth: 0, 
     min: 0 
    }, 

    tooltip: { 
     shared: true, 
     pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>' 
    }, 

    legend: { 
     align: 'right', 
     verticalAlign: 'top', 
     y: 70, 
     layout: 'vertical' 
    }, 
    credits: { 
     enabled: false 
    }, 
    **series: [{ 
     name: 'Build 1', 
     data: [0, 150, 680], 
     pointPlacement: 'on' 
    }, { 
     name: 'Build 2', 
     data: [100, 170, 1045], 
     pointPlacement: 'on'** 
    }] 

});

JS состоит из двух карт - «Primary», как предполагается использовать данные из таблицы с идентификатором = «datatable1» и «Вторичный» предполагается использовать данные из таблицу с именем id = "datatable2". Они оба являются паутинками. Части, выделенные жирным шрифтом, являются текущими данными (заполнителем).

Я пробовал использовать следующий метод, рекомендованный для высоких диаграмм для HTML-таблиц, но я просто не могу заставить его работать со Spider Web Charts.

$(function() { 
$('#container').highcharts({ 
    data: { 
     table: 'datatable' 
    },

Все приведенное выше показано в этом jsfiddle.

источник

2015-10-20 Zipdz

Скорее всего, проблема с данными заключается в использовании тегов <b>..</b>. Highcharts пытается разобрать эту строку как номер и parseFloat() возвращает NaN. Удалите их, и модуль data.js должен работать без проблем.

об обновлении данных об изменении, я хотел бы добавить дополнительную информацию для каждой из строк, например:

<tr> 
    <td>Power</td> 
    <td contenteditable='true' id='BP1' chart="0" series="0" point="0">0</td> 
    <td contenteditable='true' id='BP2' chart="0" series="1" point="0">0</td> 
</tr>

Где:

chart="0" - индекс карты (0 или 1)
series="0" - индекс SERES/здания (0 или 1)
point="0" - индекс точки в серии (или мы можем назвать его строка-индекс)

Теперь просто прикрепить событие, чтобы обновить правильные пункты:

$('#datatable1 td[contenteditable=true]').on("input", function (e) { 
    var $self = $(this), 
     chart = $self.attr("chart"), 
     series = $self.attr("series"), 
     point = $self.attr("point"), 
     value = parseFloat($self.text()); 

    if (!isNaN(value)) { // prevent from setting "asdafd" etc. strings - only numbers are accepted 
     Highcharts.charts[chart].series[series].points[point].update(value); 
    } 
});

Теперь смотрите рабочую демо-версию (для первой диаграммы): http://jsfiddle.net/477nt4zh/2/

источник

2015-10-21 10:35:38

Большое спасибо, что сделал трюк , Я попытаюсь применить его к остальной части моей работы. – Zipdz

Импорт данных из таблицы HTML в highcharts

ответ

Смежные вопросы