WinJS - Highcharts는, 구글 크롬

Question

좋은 아침에로드되지

나는 작은 대시 보드 작업과 WinJS를 사용하여,하지만 난 Highcharts에 문제가 있어요. WinJS.UI.HubSection 내부에서는로드 할 수없고 Google 크롬에서만로드 할 수 있습니다. 나는 파이어 폭스를 시도하고 보여 주었다. Highstock을 사용하는 두 번째 그래프가 있으며 어디서나 잘 작동합니다. 거의 모든 것을 시도해 보았고 HubSection 내부에 하이 차트가로드되지 않은 이유를 알지 못합니다. 귀하의 답변과 도움에 감사드립니다.

RainbowShaggy

Answer 1

당신은 DIV #vehicles에서 차트를 만들려고하지만, jQuery를 (데모)에도 Highcharts (I 테스트)하는 그 용기를 찾을 수 있습니다.

Highstock 차트를 만들 때 모든 div를 사용할 수 있으므로 createChart 함수에서 모든 차트를 만드는 경우 성공적으로 만들어야합니다.

예 : https://jsfiddle.net/r6twbj0z/6/

var clientsArray = []; 
stationsArray = []; 
companiesArray = []; 

WinJS.Namespace.define("ListView.Clients", { 
    data: new WinJS.Binding.List(clientsArray) 
}); 

WinJS.Namespace.define("ListView.Stations", { 
    data: new WinJS.Binding.List(stationsArray) 
}); 

WinJS.Namespace.define("ListView.Companies", { 
    data: new WinJS.Binding.List(companiesArray) 
}); 

WinJS.UI.processAll(); 

$(function() { 

    var seriesOptions = [], 
    seriesCounter = 0, 
    names = ['MSFT', 'AAPL', 'GOOG']; 

    /** 
    * Create the chart when all data is loaded 
    * @returns {undefined} 
    */ 
    function createChart() { 

    $('#companyvalue').highcharts('StockChart', { 

     /*chart : { 
      events : { 
       load : function() { 

        // set up the updating of the chart each second 
        var series = this.series[0]; 
        setInterval(function() { 
         var x = (new Date()).getTime(), // current time 
          y = Math.round(Math.random() * 100); 
         series.addPoint([x, y], true, false); 
        }, 1000); 
       } 
      } 
     },*/ 

     rangeSelector: { 
     selected: 4 
     }, 

     yAxis: { 
     labels: { 
      formatter: function() { 
      return (this.value > 0 ? ' + ' : '') + this.value + '%'; 
      } 
     }, 
     plotLines: [{ 
      value: 0, 
      width: 2, 
      color: 'silver' 
     }] 
     }, 

     plotOptions: { 
     series: { 
      compare: 'percent' 
     } 
     }, 

     tooltip: { 
     pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', 
     valueDecimals: 2 
     }, 

     series: seriesOptions 
    }); 

    $('#vehicles').highcharts({ 
     chart: { 
     type: 'column' 
     }, 
     title: { 
     text: 'Použité vozidla' 
     }, 
     xAxis: { 
     categories: ['Vlaky', 'Autobusy', 'Nákl. auta', 'Lodě', 'Letadla'] 
     }, 
     yAxis: { 
     min: 0, 
     title: { 
      text: 'Počet vozidel' 
     }, 
     stackLabels: { 
      enabled: true, 
      style: { 
      fontWeight: 'bold', 
      color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
      } 
     } 
     }, 
     legend: { 
     align: 'right', 
     x: -30, 
     verticalAlign: 'top', 
     y: 25, 
     floating: true, 
     backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', 
     borderColor: '#CCC', 
     borderWidth: 1, 
     shadow: false 
     }, 
     tooltip: { 
     headerFormat: '<b>{point.x}</b><br/>', 
     pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}' 
     }, 
     plotOptions: { 
     column: { 
      stacking: 'normal', 
      dataLabels: { 
      enabled: true, 
      color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
      style: { 
       textShadow: '0 0 3px black' 
      } 
      } 
     } 
     }, 
     series: [{ 
     name: 'John', 
     data: [5, 3, 4, 7, 2] 
     }, { 
     name: 'Jane', 
     data: [2, 2, 3, 2, 1] 
     }, { 
     name: 'Joe', 
     data: [3, 4, 4, 2, 5] 
     }] 
    }); 
    } 

    $.each(names, function(i, name) { 

    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function(data) { 

     seriesOptions[i] = { 
     name: name, 
     data: data 
     }; 

     // As we're loading the data asynchronously, we don't know what order it will arrive. So 
     // we keep a counter and create the chart when all the data is loaded. 
     seriesCounter += 1; 

     if (seriesCounter === names.length) { 
     createChart(); 
     } 
    }); 
    }); 
});