转换字符串值为int被highchart

内使用在该小提琴IM试图JSON字符串解析和图表上Y轴的结果：转换字符串值为int被highchart

但Y值不被映射到其json值。

我正在使用parseInt(obj.in)将json字符串转换为int值。但这似乎是正确的？

代码：

HTML : 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 

<div id="container2" style="width:500px;height:400px;margin:1.5em 1em;"></div> 

<script> 
var d   = new Date(); 
var pointStart = d.getTime(); 
Highcharts.setOptions({ 
    global: { 
     useUTC:false 
    }, 
    colors: [ 
     'rgba(0, 154, 253, 0.9)', //bright blue 
     'rgba(253, 99, 0, 0.9)', //bright orange 
     'rgba(40, 40, 56, 0.9)', //dark 
     'rgba(253, 0, 154, 0.9)', //bright pink 
     'rgba(154, 253, 0, 0.9)', //bright green 
     'rgba(145, 44, 138, 0.9)', //mid purple 
     'rgba(45, 47, 238, 0.9)', //mid blue 
     'rgba(177, 69, 0, 0.9)', //dark orange 
     'rgba(140, 140, 156, 0.9)', //mid 
     'rgba(238, 46, 47, 0.9)', //mid red 
     'rgba(44, 145, 51, 0.9)', //mid green 
     'rgba(103, 16, 192, 0.9)' //dark purple 
    ], 
    chart: { 
     alignTicks:false, 
     type:'', 
     margin:[60,25,100,90], 
     //borderRadius:10, 
     //borderWidth:1, 
     //borderColor:'rgba(156,156,156,.25)', 
     //backgroundColor:'rgba(204,204,204,.25)', 
     //plotBackgroundColor:'rgba(255,255,255,1)', 
     style: { 
      fontFamily: 'Abel,serif' 
     } 
    }, 
    title: { 
     text:'Test Chart Title', 
     align:'left', 
     margin:10, 
     x: 50, 
     style: { 
      fontWeight:'bold', 
      color:'rgba(0,0,0,.9)' 
     } 
    }, 
    subtitle: { 
     text:'Test Chart Subtitle', 
     align:'left', 
     x: 52, 
    }, 
    legend: { enabled: true }, 
    plotOptions: { 
     area: { 
      lineWidth:1, 
      marker: { 
       enabled:false, 
       symbol:'circle', 
       radius:4 
      } 
     }, 
     arearange: { 
      lineWidth:1 
     }, 
     areaspline: { 
      lineWidth:1, 
      marker: { 
       enabled:false, 
       symbol:'circle', 
       radius:4 
      } 
     }, 
     areasplinerange: { 
      lineWidth:1 
     }, 
     boxplot: { 
      groupPadding:0.05, 
      pointPadding:0.05, 
      fillColor:'rgba(255,255,255,.75)' 
     }, 
     bubble: { 
      minSize:'0.25%', 
      maxSize:'17%' 
     }, 
     column: { 
      //stacking:'normal', 
      groupPadding:0.05, 
      pointPadding:0.05 
     }, 
     columnrange: { 
      groupPadding:0.05, 
      pointPadding:0.05 
     }, 
     errorbar: { 
      groupPadding:0.05, 
      pointPadding:0.05, 
      showInLegend:true   
     }, 
     line: { 
      lineWidth:1, 
      marker: { 
       enabled:false, 
       symbol:'circle', 
       radius:4 
      } 
     }, 
     scatter: { 
      marker: { 
       symbol: 'circle', 
       radius:5 
      } 
     }, 
     spline: { 
      lineWidth:1, 
      marker: { 
       enabled:false, 
       symbol:'circle', 
       radius:4 
      } 
     }, 
     series: { 
      shadow: false, 
      borderWidth:0, 
      states: { 
       hover: { 
        lineWidthPlus:0, 
       } 
      } 
     } 
    }, 
    xAxis: { 
     title: { 
      text: 'X Axis Title', 
      rotation:0, 
      textAlign:'center', 
      style:{ 
       color:'rgba(0,0,0,.9)' 
      } 
     }, 
     labels: { 
      style: { 
       color: 'rgba(0,0,0,.9)', 
       fontSize:'9px' 
      } 
     }, 
     lineWidth:.5, 
     lineColor:'rgba(0,0,0,.5)', 
     tickWidth:.5, 
     tickLength:3, 
     tickColor:'rgba(0,0,0,.75)' 
    }, 
    yAxis: { 
     minPadding:0, 
     maxPadding:0, 
     gridLineColor:'rgba(204,204,204,.25)', 
     gridLineWidth:0.5, 
     title: { 
      text: 'Y Axis<br/>Title', 
      rotation:0, 
      textAlign:'right', 
      style:{ 
       color:'rgba(0,0,0,.9)', 
      } 
     }, 
     labels: { 
      style: { 
       color: 'rgba(0,0,0,.9)', 
       fontSize:'9px' 
      } 
     }, 
     lineWidth:.5, 
     lineColor:'rgba(0,0,0,.5)', 
     tickWidth:.5, 
     tickLength:3, 
     tickColor:'rgba(0,0,0,.75)' 
    } 
}); 


</script> 

CSS : 

@import url(https://fonts.googleapis.com/css?family=Changa+One|Loved+by+the+King|Fredericka+the+Great|Droid+Serif:400,700,400italic|Abel|Oswald:400,300,700); 

body { 
    font-family:Abel, Calibri, Helvetica, sans-serif; 
    font-size:95%; 
} 

javascript : 

var chart; 
var pointStart = Date.UTC(2014,0,1); 
$(function() { 

    $('#container2').highcharts({ 
     chart  : { type : 'line' }, 
     title  : { }, 
     subtitle : { }, 
     legend  : { enabled : true }, 
     tooltip  : { }, 
     plotOptions : { 
      series : { 
       pointStart  : pointStart, 
       pointInterval : 24 * 3600 * 1000 
      } 
     }, 
     xAxis  : { 
      type   : 'datetime', 
      tickInterval : 24 * 3600 * 1000, //one day 
      labels   : { 
       rotation : 0 
      } 
     }, 
     yAxis  : { } 
    }); 
    chart = $('#container2').highcharts(); 


var jsonString = '[ { "date": "2014-1-11", "in": "4", "out": "4" }, { "date": "2014-1-12", "in": "4", "out": "4" }, { "date": "2014-1-13", "in": "4", "out": "4" } ]'; 

var myData = JSON.parse(jsonString); 
var dataArray = [] 

$.each(myData, function(i, obj) { 
    console.log(obj.date) 
    var d = new Date(obj.date) 
    dataArray.push(Date.parse(d) , parseInt(obj.in)) 
}); 

    chart.addSeries({ 
     data: dataArray  
    }); 

    console.log('data is '+dataArray) 
})

来源

2015-07-20 blue-sky

你的数据阵列逻辑看起来好像没什么问题，并登录正确的值控制台，你确定你正在配置你的图表和系列？ – timothyclifford

我不知道主要问题，但至少，'parseInt（obj.in）'应该是'parseInt（obj.in，10）' – ben

的问题是要创建dataArray所有X & Y值的平面数组。当您将数据添加到highcharts，它预计X & Y值是嵌套数组类似：

[[1,123], [2,234], [3,345]]

试试这个：

dataArray.push([Date.parse(d), parseInt(obj.in)])

来源

2015-07-20 11:52:53 timothyclifford

转换字符串值为int被highchart

回答

相关问题