javascript - 加载 javascript 时无法传递参数(以数组形式)

Question

所以我有这个 javascript 文件(highchart)。我想在 yii2 的 View 文件中使用不同的参数重用它。在我不得不使用包含数字的数组之前，我这样做没有任何问题:

<script 
    type="text/javascript" 
    iddiv="miskinprov"
    axisjudul="Persentase Penduduk Miskin"
    seriesjudul="Penduduk Miskin"
    d1=17.10
    d2=18.34
    d3=17.48
    d4=17.88
    d5=17.32
    dtextjudul="Perkembangan Persentase Penduduk Miskin <br/>di Provinsi Bengkulu, 2010-2016 (Maret)"
    dtextsubjudul='Sumber: <a href="http://bengkulu.bps.go.id/">BPS Provinsi Bengkulu</a>'
src="<?php echo Yii::$app->request->baseUrl; ?>/filejs/chartdata/1700_bkl_trend.js"></script>

这是 1700_bkl_trend.js 文件:

var jscript = $('script[src*=1700_bkl_trend]');
$(function () {
Highcharts.chart(jscript.attr('iddiv'), {
    chart: {
        type: 'line',
        height: 500,
        ...
    },
    title: {
        text: jscript.attr('dtextjudul'),
    },
    subtitle: {
        text: jscript.attr('dtextsubjudul'),
    },        
    xAxis: {
        title: {
            text: 'Tahun',
        },
        categories: ['2012', '2013', '2014', '2015', '2016'],
    },
    yAxis: {
        title: {
            text: jscript.attr('axisjudul'),
        },            
    },        
    series: [{
            name: jscript.attr('seriesjudul'),
            data: [jscript.attr('d1'), jscript.attr('d2'), jscript.attr('d3'), jscript.attr('d4'), jscript.attr('d5')],
            color: '#B22D12',
        }]
});

});

问题出在这部分:

data: [jscript.attr('d1'), jscript.attr('d2'), jscript.attr('d3'), jscript.attr('d4'), jscript.attr('d5')],
                //data: [jscript.attr('d1')],

Highcharts 显示，但系列不显示。我尝试过使用这个:

<?php
$s1 = 17.10;
?>
d1='<?php echo json_encode($s1); ?>'

还在参数中使用双引号和单引号，但仍然没有成功。我还有什么没做过？

Answer 1

这可能是缺少 parseInt - HTML 属性作为字符串而不是数字传递。我以这种方式工作(使用 vanillaJS)

var jscript = document.querySelector('script[src*="1700_bkl_trend"]');
//var x =  [jscript.getAttribute('d1'), jscript.getAttribute('d2'), jscript.getAttribute('d3'), jscript.getAttribute('d4'), jscript.getAttribute('d5')]
//console.log(x);
(function () {
Highcharts.chart(jscript.getAttribute('iddiv'), {
    chart: {
        type: 'line',
        height: 500,
    },
    title: {
        text: jscript.getAttribute('dtextjudul'),
    },
    subtitle: {
        text: jscript.getAttribute('dtextsubjudul'),
    },        
    xAxis: {
        title: {
            text: 'Tahun',
        },
        categories: ['2012', '2013', '2014', '2015', '2016'],
    },
    yAxis: {
        title: {
            text: jscript.getAttribute('axisjudul'),
        },            
    },        
    series: [{
            name: jscript.getAttribute('seriesjudul'),
            data: [parseInt(jscript.getAttribute('d1')), parseInt(jscript.getAttribute('d2')), parseInt(jscript.getAttribute('d3')), parseInt(jscript.getAttribute('d4')), parseInt(jscript.getAttribute('d5'))],
            color: '#B22D12',
        }]
});
})()

<script src="https://code.highcharts.com/highcharts.js"></script>
<script 
    type="text/javascript" 
    iddiv="miskinprov"
    axisjudul="Persentase Penduduk Miskin"
    seriesjudul="Penduduk Miskin"
    d1=17.10
    d2=18.34
    d3=17.48
    d4=17.88
    d5=17.32
    dtextjudul="Perkembangan Persentase Penduduk Miskin <br/>di Provinsi Bengkulu, 2010-2016 (Maret)"
    dtextsubjudul='Sumber: <a href="http://bengkulu.bps.go.id/">BPS Provinsi Bengkulu</a>'
src="<?php echo Yii::$app->request->baseUrl; ?>/filejs/chartdata/1700_bkl_trend.js"></script>
<div id="miskinprov"></div>