Question

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

C＃代码

WITH IntelilinkValues (
    Amount,
    Frequency,
    Periods
)
AS (
SELECT 
    LBD.Amount,
    LBD.Payment_Frequency,
    LBD.No_of_Periods
FROM _SYS_BIC.LeasingRebooksDetails LBD 
WHERE LBD.Contract_Number='D003498006'
)
select Amount
into #ilv
from IntelilinkValues

select ss.somestuff, 
CASE 
WHEN SAPStreams.Stream_Type = 'INTELILINK' THEN (
    select Amount
    from #ilv
)
ELSE NULL END,
sot.someotherstuff

from SAPStreams ss
  inner join someothertable sot on sot.id = ss.id

where somecondition = 'true'

drop table #ilv

JS代码：

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 });


});

Answer 1

您必须将字符串'["40","61","65","74","77"]'转换为带数字的js数组。要使其在每种浏览器上都能正常工作，您可以按照以下方法操作：

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

  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;
});

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

2 个答案: