2016-07-05 4 views
0

Я использую highcharts, чтобы попытаться построить график рассеяния с ежеквартальными интервалами.highcharts javascript variables

Вот мой код:

 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] Вы можете просмотреть его здесь: infowys.com/scott –

+0

скопируйте/вставьте свое обновление, пожалуйста, – Alexandre