2016-07-05 59 views
0

我正在使用highcharts以嘗試以季度間隔構建散點圖。highcharts javascript變量

這裏是我的代碼:

 laboreff = ''; 
      if ($.isArray(dataItem.content)) { 
      for (var i = 0, max = dataItem.content.length; i < max; i += 1) { 
       laboreff += '{"x:Date.UTC('+'"'+dataItem.content[i].FiscalYear + '" ' + ', ' + '"' + dataItem.content[i].FiscalQuarter + '"'+'),"y":' + '"'+ dataItem.content[i].AverageLaborEfficiencyRatiobySICCode + '"'+'},'; 
      } 
      } 

      var laboreff = laboreff; 
      var jannes = '[Date.UTC(2007,0,1),72634],[Date.UTC(2007,3,1),72634],[Date.UTC(2007,6,1),72634],[Date.UTC(2007,9,1),72634]'; 
//var jannes = JSON.parse("[" + jannes + "]") 
// var laboreff = $.parseJSON(laboreff); 
     //console.log(laboreff); 
      Highcharts.setOptions({ 
      colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'] 
      } 
           ); 
      var chartMain; 
      chartMain = new Highcharts.Chart({ 
      chart: { 
       type: 'line', 
       renderTo: 'container2', 
       alignTicks: true, 
       borderWidth: 0, 
       resetZoomButton: { 
       position: { 
        align: 'right', 
        verticalAlign: 'top' 
       } 
       } 
       , 
       shadow: true, 
       spacingTop: 10, 
       spacingRight: 20, 
       spacingBottom: 50, 
       spacingLeft: 20, 
       zoomType: 'x' 
      } 
      , 
      credits: { 
       enabled: false 
      } 
      , 
      legend: { 
       align: 'center', 
       enabled: true, 
       itemStyle: { 
       fontSize: '9px', 
       width: '175px' 
       } 
       , 
       layout: 'horizontal', 
       verticalAlign: 'bottom' 
      } 
      , 
      plotOptions: { 
       series: { 
       shadow: true 
       } 
       , 
       spline: { 
       marker: { 
        enabled: false 
       } 
       } 
      } 
      , 
      subtitle: { 
       align: 'center', 
       text: 'Average Labor Efficiency Ratio by SIC code', 
       style: { 
       fontSize: '9px', 
       width: '100%' 
       } 
       , 
       verticalAlign: 'bottom' 
      } 
      , 
      title: { 
       text: '' 
      } 
      , 
      tooltip: { 
       formatter: function() { 
       var s = '<b>'; 
       if (Highcharts.dateFormat('%b', this.x) == 'Jan') { 
        s = s + "Q1" 
       }; 
       if (Highcharts.dateFormat('%b', this.x) == 'Apr') { 
        s = s + "Q2" 
       }; 
       if (Highcharts.dateFormat('%b', this.x) == 'Jul') { 
        s = s + "Q3" 
       }; 
       if (Highcharts.dateFormat('%b', this.x) == 'Oct') { 
        s = s + "Q4" 
       }; 
       s = s + " " + Highcharts.dateFormat('%Y', this.x) + '</b>'; 
       $.each(this.points, function (i, point) { 
        s += '<br/>' + point.series.name + ': '; 
        if (point.series.name == 'Unemployment Rate (%)') { 
        s += Highcharts.numberFormat(point.y, 2, '.'); 
        } 
        else { 
        s += Highcharts.numberFormat(point.y, 0, ','); 
        } 
       } 
        ); 
       return s; 
       } 
       , 
       shared: true 
      } 
      , 
      xAxis: { 
       ordinal:false, 
       alternateGridColor: '#FAFAFA', 
       labels: { 
       style: { 
        fontSize: '9px', 
        width: '175px' 
       } 
       , 
       formatter: function() { 
        var s = ""; 
        if (Highcharts.dateFormat('%b', this.value) == 'Jan') { 
        s = s + "Q1" 
        }; 
        if (Highcharts.dateFormat('%b', this.value) == 'Apr') { 
        s = s + "Q2" 
        }; 
        if (Highcharts.dateFormat('%b', this.value) == 'Jul') { 
        s = s + "Q3" 
        }; 
        if (Highcharts.dateFormat('%b', this.value) == 'Oct') { 
        s = s + "Q4" 
        }; 
        s = s + " " + Highcharts.dateFormat('%Y', this.value); 
        return s; 
       } 
       } 
       , 
       tickInterval: 3 * 30 * 24 * 3600 * 1000, 
       type: 'datetime' 
      } 
      , 
      yAxis: [{ 
       endOnTick: true, 
       gridLineWidth: 1, 
       gridLineColor: '#BCCBA0', 
       labels: { 
       style: { 
        color: '#89A54E', 
        fontSize: '9px', 
        width: '175px' 
       } 
       } 
       , 
       opposite: false, 
       title: { 
       text: '' 
       } 
      } 
        ], 
      exporting: { 
       buttons: { 
       exportButton: { 
        align: 'right', 
        verticalAlign: 'bottom', 
        y: -5 
       } 
       , 
       printButton: { 
        symbol: 'url(/vos_v14_predev/vosnet/Handlers/Content/Images/Image.ashx?DotImage/Icons/Print_24.png)', 
        align: 'right', 
        height: 20, 
        symbolSize: 22, 
        symbolX: 12, 
        symbolY: 7.5, 
        verticalAlign: 'bottom', 
        width: 24, 
        y: -5 
       } 
       } 
       , 
       width: 565 
      } 
      , 
      navigation: { 
       buttonOptions: { 
       enabled: false 
       } 
      } 
      , 

      series: [{ 
      data: [ [Date.UTC(2007,0,1),72634],[Date.UTC(2007,3,1),72634],[Date.UTC(2007,6,1),72634],[Date.UTC(2007,9,1),72634] ], 
    // data: [ laboreff or jannes variable], THIS DOES NOT WORK. 
       name: 'Fisheries', 
       type: 'scatter', 
       yAxis: 0 
      } 
        ] 
      } 
             ); 
       alert(laboreff); 
       console.log(jannes); 
     } 
     } 
    } 
        ); 
    } 
        ); 
</script> 

變量laboreff得到正確的內容,當我粘貼控制檯的價值的把它加載一系列數據,我已經試過Json.parse但因爲它不是有效的JSON不工作。任何想法爲什麼圖不加載變量?

如果我從控制檯中將變量jannes和laboreff的值複製粘貼到數據中,它就可以工作。

+0

你能不能給我們的jsfiddle? – Alexandre

+0

我會,但是進來的json字符串是在應用程序中動態生成的。 –

+0

Infowys.com/scott這裏是,如果您使用網絡insecptor並查看被加載的json.php,則json數據位於那裏。 –

回答

0

你能試試這個:

var laboreff = []; 

if ($.isArray(dataItem.content)) { 
    for (var i = 0, max = dataItem.content.length; i < max; i += 1) { 
     laboreff.push({ 
      x: new Date(dataItem.content[i].FiscalYear).getTime(), 
      y: dataItem.content[i].FiscalQuarter 
     }); 
    } 
} 
+0

請注意,在HighCharts中,你需要設置一個時間戳,以便定義x值http://api.highcharts.com/highcharts#series .data.x – Alexandre

+0

嗨,我這樣做,我得到的是[object ] [object]您可以在這裏查看:infowys.com/scott –

+0

複製/粘貼您的更新請 – Alexandre