Question

我有几天尝试使用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>

所有可编辑单元格都有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”应该使用表中id =“datatable1”的数据，而“Secondary”应该使用名为id =“datatable2”的表中的数据。它们都是蜘蛛网图表。粗体部分是当前数据（占位符）。

我尝试使用以下方法，建议使用HTML图表的高级图表，但我无法使用Spider Web Charts。

$(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表导入highcharts

1 个答案: