[英]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.