将数据从 HTML table 导入到 highcharts

Question

几天来我一直在尝试使用 highcharts 编写代码。代码的要点是我希望能够将数据输入 table，然后相应地更新图表。我还没有制作更新组件，因为我坚持从 table 获取数据到图表。它们要么完全停止工作，变为透明，要么部分消失。

我的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>

所有 editable 单元格都有一个 id 的原因是因为我的第一个想法是指向单个单元格中的数据，但我无法让它工作。

我的 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" 应该使用来自 table with id="datatable1" 的数据，"Secondary" 应该使用数据来自 table 称为 id="datatable2"。它们都是蜘蛛网图表。粗体部分为当前数据（占位符）。

我试过使用以下方法，highcharts 为 HTML table 推荐，但我无法使其与蜘蛛网图表一起使用。

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

上面的所有内容都显示在这个jsfiddle中。

Answer 1

很可能数据的问题是使用 <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/building（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/

将数据从 HTML table 导入到 highcharts

Importing data from HTML table to highcharts

html

javascript

datatable

highcharts