个人中心
gpt4 book ai didi

javascript - 使用 HTML5 自定义数据属性将数据从
转载 作者：行者123 更新时间：2023-11-28 01:38:50 25 4
gpt4 key购买 nike

我想将数据从 div id 传递到 javascript highcharts 函数。我正在遵循这里有人通过查看 HTML5 Custom Data Attributes 提出的建议。

但是，一定有问题，因为当我尝试使用变量而不是使用 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/

关于javascript - 使用 HTML5 自定义数据属性将数据从 <div 传递到 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21170148/

25 4 0

行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com