[英]Using HTML5 Custom Data Attributes to pass data from <div to javascript
我想将数据从div id
传递到javascript
highcharts
函数。 通过查看HTML5自定义数据属性,我正在遵循某人在此提出的建议。
但是一定有问题,因为当我尝试使用变量而不是使用val1,val2等的数据序列中的数字时,什么都没画。 当我出于测试目的将其改回任意数字时,它可以工作。 谁能解释为什么?
(我在这里将其中一个保留为val1,但将序列中的其他3个保留为数字)
JAVASCRIPT功能
<script>
$(function () {
var piedata = document.getElementById('containerpie');
var val1 = piedata.getAttribute('data-param1');
var val2 = piedata.getAttribute('data-param2');
var val3 = piedata.getAttribute('data-param3');
var val4 = piedata.getAttribute('data-param4');
$('#containerpie').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title:{
text: 'Quality of teaching'
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: 'Judgement',
data: [
['1', val1],
['2', 24],
{
name: '3',
y: 8,
sliced: true,
selected: true
},
['4', 3]
]
}]
});
});
</script>
DIV ID部分
<div id="containerpie" data-param1="10" data-param2="20" data-param3="30" data-param4="30" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
首先,如果您使用的是jQuery,为什么不使用$(“#containerpie”)而不是getElementById? 您也可以使用$(“#containerpie”)。data(“ param1”)获得值。
您确定要分配var1,var2等吗? 您可以在分配检查后发出警报。 另外,尝试将值解析为int(var val1 = piedata.getAttribute('data-param1');
尝试这个:
$(function () {
var $piedata = $("#containerpie");
var val1 = parseInt($piedata.data('param1'));
var val2 = parseInt($piedata.data('param2'));
var val3 = parseInt($piedata.data('param3'));
var val4 = parseInt($piedata.data('param4'));
alert("Val1: " + val1 + " Val2: " + val2 + " Val3: " + val3 + " Val4: " + val4 );
$piedata.highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title:{
text: 'Quality of teaching'
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: 'Judgement',
data: [
['1', val1],
['2', 24],
{
name: '3',
y: 8,
sliced: true,
selected: true
},
['4', 3]
]
}]
});
});
更新:
我已经运行了您的代码,效果很好,请参阅: http : //jsfiddle.net/7ae7t/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.