来自变量数组字符串的Highcharts数据值

Question

在数据库中有一个名为ChartData的列，其字符串值为4,11,25,36,50。尝试将此值分配给隐藏变量，以便JS可以读取此值，并使用高图表将此值放入数据选项中。我有console.log变量，看起来像是在服务器端解析到客户端时它出现的字符串而不是数组。

C＃代码

string str = reader["ChartData"].ToString();

                string[] strList = str.Split(','); //seperate the hobbies by comma

                // convert it in json
                 dataStr = JsonConvert.SerializeObject(strList, Formatting.None);

                 hiddenvariable.Value = dataStr;

JS代码：

function CreateBoxPlot() {


var hv = $('#hiddenvariable').val();
alert(hv); //["40","61","65","74","77"]

var chart;
var titleText = 'Test Chart Title';
var subTitleText = 'Test Chart Subtitle';
var type = 'boxplot';
var data = hv; 

console.log(data); //["40","61","65","74","77"]

$(function () {
    $('#container').highcharts({
        chart: { type: type, inverted: true },
        title: { text: titleText },
        subtitle: { text: subTitleText },
        legend: { enabled: false },
        tooltip: {
            shared: true,
            crosshairs: true
        },
        plotOptions: {
            series: {
                pointWidth: 50
            }
        },

        xAxis: {
            visible: false

        },
        yAxis: {

            visible: true,
            title: {
                text: 'Values'
            },

            plotLines: [{
                value: 80,
                color: 'red',
                width: 2

            }]

        }
    });

    chart = $('#container').highcharts();
    chart.addSeries({ data: data });


});

}

但是，当我将数据硬编码到以下值时，这是有效的。当它解析到JS端时，我如何正确格式化：

var data = [[40,61,65,74,77]]

Answer 1

你必须将字符串'["40","61","65","74","77"]'转换为带数字的js数组。要使其适用于每个浏览器，您可以遵循以下方法：

1. 使用JSON.parse()将字符串解析为js数组
2. 循环创建的数组并将每个元素转换为数字：

---

  var json = '["40","61","65","74","77"]',
      dataString = JSON.parse(json),
      data = [],
      i;

  for (i = 0; i < dataString.length; i++) {
    data[i] = +dataString[i];
  }

码：

$(function() {

	var json = '["40","61","65","74","77"]',
  		dataString = JSON.parse(json),
  		data = [],
  		i;
      
  for (i = 0; i < dataString.length; i++) {
  	data[i] = +dataString[i];
  }

  $('#container').highcharts({
    chart: {
      inverted: true
    },
    legend: {
      enabled: false
    },
    tooltip: {
      shared: true,
      crosshairs: true
    },
    plotOptions: {
      series: {
        pointWidth: 50
      }
    },
    xAxis: {
      visible: false
    },
    yAxis: {
      visible: true,
      title: {
        text: 'Values'
      },
      plotLines: [{
        value: 80,
        color: 'red',
        width: 2
      }]
    }
  });

  chart = $('#container').highcharts();
  chart.addSeries({
    data: data
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

演示：

• https://jsfiddle.net/BlackLabel/ay1xmgoc/

Answer 2

参考评论，将其添加到您的代码中然后尝试。

var data = hv.map(function (element) {
  return +element;
});