我有几天尝试使用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。
中答案 0 :(得分:0)
数据问题很可能是使用<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/