使用HTML5自定义数据属性从<；传递数据；div到javascript

我想将数据从

divid

传递到

javascript

highcharts

函数。我是按照这里有人提出的建议，通过查看

然而，一定是出了什么问题，因为当我尝试在数据系列中使用变量而不是数字时，使用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="containerpie" data-param1="10" data-param2="20" data-param3="30" data-param4="30" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

$（函数（）{
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”）。高图({
图表：{
plotBackgroundColor:null，
plotBorderWidth:null，
plotShadow:false
},
标题：{
课文：“教学质量”
},
学分：{
已启用：false
},
工具提示：{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
启用：对，
颜色：'#000000'，
连接器颜色：'#000000'，
格式：'{point.name}:{point.percentage:.1f}%'
}
}
},
系列：[{
键入“pie”，
名称:"判决",，
数据：[
[1'，val1]，
['2',   24],
{
名称：‘3’，
y:8，
切碎：是的，
所选：真
},
['4',    3]
]
}]
});
});

DIV ID部分

<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="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]
            ]
        }]
    });
});

$（函数（）{
var$piedata=$（“#集装箱公司”）；
var val1=parseInt（$piedata.data（'param1'））；
var val2=parseInt（$piedata.data（'param2'））；
var val3=parseInt（$piedata.data（'param3'））；
var val4=parseInt（$piedata.data（'param4'）；
警报（“Val1:+Val1+”Val2:+Val2+”Val3:+Val3+”Val4:+Val4）；
$piedata.highcharts({
图表：{
plotBackgroundColor:null，
plotBorderWidth:null，
plotShadow:false
},
标题：{
课文：“教学质量”
},
学分：{
已启用：false
},
工具提示：{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
启用：对，
颜色：'#000000'，
连接器颜色：'#000000'，
格式：'{point.name}:{point.percentage:.1f}%'
}
}
},
系列：[{
键入“pie”，
名称:"判决",，
数据：[
[1'，val1]，
['2',   24],
{
名称：‘3’，
y:8，
切碎：是的，
所选：真
},
['4',    3]
]
}]
});
});

更新：

---

我已经运行了您的代码，工作正常，请参阅：

谢谢-警报显示我正在将数据获取到val1、val2等。问题一定是在序列数据中引用的位置-序列：[{type:'pie'，name:'decision'，data:['1'，val1]，我刚刚注意到，如果我将警报放在$（'#containerpie'）.highcharts（{line）之后，它不会弹出，也不会绘制任何内容。因此，正在分配变量，但不会交叉到$（'#containerpie'）.highcharts中({part-有什么想法吗？那是因为你不能在对象中放入语句！请查看我的更新响应，它对我有效。