Question

我有一个案例，当我无法理解highcharts行为。

在绘制原始数据系列时，我得到一个奇怪的x轴（错误的开始/结束标记）和缩放行为的图形。如果我完成系列，以便两个系列中都存在每个数据点（即将第一个系列的日期添加到第二个系列的日期为0），一切都会恢复正常。

如果你看这个sample jsFiddle，开始日期是2月12日。 2012年午夜和结束日期是31 janv。然而，2013年午夜，顶部的图表显示了在2月结束的x轴。如果您尝试缩放，则滴答文本会出现乱码。在底部的图表中，绘制了相同的数据，但这次使用“数据填充”，x轴很好，缩放按预期工作。

所以我的问题是，有谁知道问题是什么，数据是否需要填充？

代码：

$(function () {
  var chart1, chart2;
  $(document).ready(function () {
    var opts = {
      chart: {
        "alignTicks": true,
          "animation": true,
          "backgroundColor": "#FFFFFF",
          "borderColor": "#4572A7",
          "borderRadius": 5,
          "borderWidth": 0,
          "ignoreHiddenSeries": true,
          "inverted": false,
          "plotBorderColor": "#C0C0C0",
          "plotBorderWidth": 0,
          "plotShadow": false,
          "reflow": true,
          "resetZoomButton": {
          "position": {
            "verticalAlign": "bottom",
              "y": 30.0
          },
            "relativeTo": "plot"
        },
          "selectionMarkerFill": "rgba(69,114,167,0.25)",
          "shadow": false,
          "showAxes": false,
          "spacingBottom": 15,
          "spacingLeft": 10,
          "spacingRight": 10,
          "spacingTop": 10,
          "type": "column",
          "zoomType": "x"
      },
      credits: {
        "enabled": false
      },
      legend: {
        "align": "center",
          "borderColor": "#909090",
          "borderRadius": 5,
          "borderWidth": 1,
          "enabled": true,
          "floating": false,
          "itemMarginBottom": 0,
          "itemMarginTop": 0,
          "layout": "horizontal",
          "lineHeight": 16,
          "margin": 15,
          "padding": 8,
          "reversed": false,
          "rtl": false,
          "shadow": false,
          "symbolPadding": 5,
          "symbolWidth": 30,
          "useHtml": false,
          "verticalAlign": "bottom",
          "x": 0,
          "y": 0
      },
      plotOptions: {
        "column": {
          "allowPointSelect": false,
            "animation": true,
            "colorByPoint": false,
            "enableMouseTracking": true,
            "grouping": true,
            "selected": false,
            "shadow": true,
            "showCheckbox": false,
            "showInLegend": true,
            "stacking": "normal",
            "stickyTracking": true,
            "visible": true
        }
      },
      title: {
        "align": "center",
          "floating": false,
          "useHTML": false,
          "verticalAlign": "top",
          "x": 0.0,
          "y": 15.0
      },
      xAxis: {
        "type": "datetime"
      },
      yAxis: {
        "title": {
          "text": "Number"
        }
      },
      tooltip: {
        "animation": true,
          "enabled": true,
          "shadow": true,
          "shared": false,
          "useHTML": false,
          "xDateFormat": "%d/%m/%Y"
      }
    };
    chart1 = new Highcharts.Chart($.extend(true, {
      chart: {
        "renderTo": "aU8Q_4"
      },
      title: { text: 'bad' },
      series: [{
        "data": [
          [
          1354489199000,
          0],
          [
          1357686000000,
          1],
          [
          1357858800000,
          1],
          [
          1358118000000,
          1],
          [
          1359673199000,
          0]
        ],
          "name": "Emit."
      }, {
        "data": [
          [
          1354489199000,
          0],
          [
          1357686000000,
          1],
          [
          1359673199000,
          0]
        ],
          "name": "Recpt."
      }]
    }, opts));
    chart2 = new Highcharts.Chart($.extend(true, opts, {
      chart: {
        "renderTo": "aU8Q_5"
      },
      title: { text: 'good' },
      series: [{
        "data": [
          [
          1354489199000,
          0],
          [
          1357686000000,
          1],
          [
          1357858800000,
          1],
          [
          1358118000000,
          1],
          [
          1359673199000,
          0]
        ],
          "name": "Emit."
      }, {
        "data": [
          [
          1354489199000,
          0],
          [
          1357686000000,
          1],
          [
          1357858800000,
          0],
          [
          1358118000000,
          0],
          [
          1359673199000,
          0]
        ],
          "name": "Recpt."
      }]
    }, opts));
  });
});

Answer 1

添加pointRange，修复行为：

plotOptions: {
    series: {
      pointRange: 24 * 3600 * 1000 // one day
    },
// ...

（source）

使用“列”类型和多个日期时间序列时使用highcharts的奇怪行为

1 个答案: