Highcharts значение данных из строки массива переменных

Question

Получил столбец с именем ChartData в базе данных со строковым значением 4,11,25,36,50.Попытка присвоить это значение скрытой переменной, чтобы JS мог прочитать это значение и поместить это значение в опцию данных, используя высокие графики.У меня есть console.log переменная, и она выглядит как строка, а не как массив при анализе на стороне сервера и на стороне клиента.

C # code

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. Разобрать строку в массив js с помощью JSON.parse()
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;
});