Question

我正在尝试使用从Web API收到的JSON创建图表。

我让它工作，然后决定开始重构。过了一会儿，我突然发现xAxis不再显示日期，而是似乎显示了滴答声。我对JavaScript很缺乏经验，对于高级图表更是如此，所以我无法发现我的错误。

High Charts showing ticks. http://mortentoudahl.dk/images/highchartsBug.png

我所做的更改是创建一个选项对象，并在实例化时将其传递给highcharts，根据此处的说明： http://www.highcharts.com/docs/getting-started/how-to-set-options 当我将我的代码与该链接中的最后一个代码块进行比较时，除了options对象外，它似乎是相同的。

var pm10 = [];
var pm25 = [];


var options = {
  chart: {
    zoomType: 'x',
    renderTo: 'container'
  },
  title: {
    text: "Compounds in the air at HCAB"
  },
  subtitle: {
    text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : "Pinch the chart to zoom in"
  },
  xAxix: {
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: 'µg/m³'
    }
  },
  series: [{
    name: 'Particles less than 2.5 µm',
    data: pm25,
    pointStart: Date.UTC(2016, 5, 8),
    pointInterval: 86400 * 1000 // One day
  }, {
    name: 'Particles less than 10 µm',
    data: pm10,
    pointStart: Date.UTC(2016, 5, 8),
    pointInterval: 86400 * 1000 // One day
  }]
};

function ReverseAndSetArrays(data) {
  $.each(data.reverse(), function(key, value) {
    if ("PM10b" in value) {
      pm10.push(value["PM10b"]);
    };
    if (!("PM10b" in value)) {
      pm10.push(null);
    };
    if ("PM25b" in value) {
      pm25.push(value["PM25b"]);
    };
    if (!("PM25b" in value)) {
      pm25.push(null);
    };
  });
};

var url = "super secret url";
$.getJSON(url, function(data) {
  ReverseAndSetArrays(data);
  var chart = new Highcharts.Chart(options);
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

Answer 1

您的选项对象中的以下配置不正确：

 xAxix: {
    type: 'datetime'
 }

应该是：

 xAxis: {
    type: 'datetime'
 }

Highcharts显示刻度数而不是日期

1 个答案: