Question

早上好，

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

RainbowShaggy

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未加载到谷歌浏览器中

1 个答案: