使用HTML5自定义数据属性将数据从< div传递给javascript [英] Using HTML5 Custom Data Attributes to pass data from <div to javascript

问题描述

我想要将数据从 div id 传递给 javascript highcharts

code>函数。我通过查看 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（{
 
 
 
图：{
 plotBackgroundColor：null，
 plotBorderWidth：null，
 plotShadow：false 
}，
 title：{
 text：'教学质量'
}，
学分：{ 
 enabled：false 
}，
 tooltip：{
 pointFormat：'{series.name}：< b> {point.percentage：.1f}％< / b> ;'
}，
 plotOptions：{
 pie：{
 allowPointSelect：true，
 cursor：'pointer'，
 dataLabels：{
启用：true，
颜色：'＃000000'，
 connectorColor：'＃000000'，
格式：'< b> {point.name}< / b> ;: {point.percentage：.1f}％' 
} 
 
 
系列：[{
 type：'pie'，
 name：'Judgment'，
 data： [
 ['1'，val1]，
 ['2'，24]，
 {
名称：'3'，
y：8，
切片：真，
选中：真
}，
 ['4'，3] 
] 
}] 
}）; 
}）; 
< / script> 
  

DIV ID部分

 < div id =containerpiedata-param1 =10data-param2 =20data-param3 =30data-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（{
图表：{
 plotBackgroundColor：null，
 plotBorderWidth：null，
 plot阴影：假
}，
标题：{
 text：'教学质量'
}，
学分：{
启用：false 
 $，
 tooltip：{
 pointFormat：'{series.name}：< b> {point.percentage：.1f}％< / b >'
}，
 plotOptions：{
 pie：{
 allowPointSelect：true，
 cursor：'pointer'，
 dataLabels：{
已启用：true，
 color：'＃000000'，
 connectorColor：'＃000000'，
格式：'< b> {point.name}< / b> ;: {point.percentage：.1f}％'
} 
} 
}，
系列：[{
 type：'pie'，
 name： '判断'，
数据：[
 ['1'，val1]，
 ['2'，24]，
 {
名称：'3'， 
y：8，
 sliced：true，
 selected：true 
}，
 ['4'，3] 
] 
}] 
}）; 
}）; 
  

更新：

我已经运行了你的代码并且工作正常，请参阅： http://jsfiddle.net/7ae7t/

I want to pass data from a div id to a javascript highcharts function. I am following the advice kindly suggested by someone on here by looking at HTML5 Custom Data Attributes

However something must be wrong because when I try to use variables instead of numbers in the data series using val1, val2 etc nothing gets drawn. When I change it back to any number for test purposes it works. Can anyone explain why?

(I have left one as val1 here but the other 3 in the series are left as numbers)

THE JAVASCRIPT FUNCTION

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

THE DIV ID SECTION

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

解决方案

First of all, if you're using jQuery, why dont you use $("#containerpie") rather than getElementById? Also you can get the values with $("#containerpie").data("param1").

Are you sure var1, var2, etc. are being assigned? You could put an alert after the assignation to check. Also, try parsing the value to int (var val1 = piedata.getAttribute('data-param1');

Try this:

$(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]
            ]
        }]
    });
});

Update:

I've run your code and it works fine, please see: http://jsfiddle.net/7ae7t/

这篇关于使用HTML5自定义数据属性将数据从< div传递给javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！