如何将字符串数组转换为int以与Highcharts一起使用

Question

HightCharts只接受一个整数数组。我想将arrVal数组值从字符串转换为整数。我怎么能这样做？

$(document).ready(function(e) {
  $("#btn").on("click", function() {
    var arrVal = $("#selectVal").val(); // I try replace('"','')
    console.log(arrVal);
    
    Highcharts.chart('container', {
      chart: {
        type: 'line'
      },
      title: {
        text: 'Monthly Report Test'
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      yAxis: {
        title: {
          text: 'Test'
        }
      },
      plotOptions: {
        line: {
          dataLabels: {
            enabled: true
          },
          enableMouseTracking: false
        }
      },
      series: [{
        name: 'Zaid Test',
        data: [arrVal] //Only accept int with comma sperated values. # 1,15,17,19,2,1,21,54
      }]
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<form id="myform" method="post">
  <select id="selectVal" name="selectVal[]" multiple="multiple">
    	<option value="2">2</option>
    	<option value="22">22</option>
    	<option value="65">65</option>
    	<option value="54">54</option>
    	<option value="32">32</option>
    	<option value="87">87</option>
    	<option value="9">9</option>
    	<option value="10">10</option>
    	<option value="60">60</option>
    </select>
  <input type="button" id="btn" value="submit" name="s">
</form>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 1

问题是因为数组包含字符串值，而Highcharts期望值为整数。要转换值，您可以使用map()，如下所示：

var arrVal = $("#selectVal").val().map(v => parseInt(v, 10));

＆＃13;

＆＃13;

$(document).ready(function(e) {
  $("#btn").on("click", function() {
    var arrVal = $("#selectVal").val().map(v => parseInt(v, 10));
    console.log(arrVal);
    
    Highcharts.chart('container', {
      chart: {
        type: 'line'
      },
      title: {
        text: 'Monthly Report Test'
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      yAxis: {
        title: {
          text: 'Test'
        }
      },
      plotOptions: {
        line: {
          dataLabels: {
            enabled: true
          },
          enableMouseTracking: false
        }
      },
      series: [{
        name: 'Zaid Test',
        data: arrVal //Only accept int with comma sperated values. # 1,15,17,19,2,1,21,54
      }]
    });

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<form id="myform" method="post">
  <select id="selectVal" name="selectVal[]" multiple="multiple">
    	<option value="2">2</option>
    	<option value="22">22</option>
    	<option value="65">65</option>
    	<option value="54">54</option>
    	<option value="32">32</option>
    	<option value="87">87</option>
    	<option value="9">9</option>
    	<option value="10">10</option>
    	<option value="60">60</option>
    </select>
  <input type="button" id="btn" value="submit" name="s">
</form>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

＆＃13;

＆＃13;

＆＃13;