WinJS

Question

早上好，

我正在开发小型仪表板并使用 WinJS，但我在使用 Highcharts 时遇到了问题。它们无法在 WinJS.UI.HubSection 中加载，只能在 google chrome 中加载。我试过 firefox 并且有显示。我有第二张图，我在其中使用 Highstock，然后在任何地方都可以正常工作。我几乎尝试了所有方法，但不知道为什么没有在 HubSection 中加载高图。感谢您的回答和帮助。

彩虹长毛

Answer 1

您正在尝试在 div #vehicles 中创建图表，但是 jQuery（在您的演示中）和 Highcharts（我测试过）都无法找到该容器。

似乎在创建 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();
      }
    });
  });
});

WinJS - Highcharts 未加载 Google Chrome

WinJS - Highcharts isn't loaded in Google Chrome

javascript

google-chrome

highcharts