1

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

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

如果您查看此示例 jsFiddle，则开始日期为 12 月 2 日。2012 年午夜，结束日期为 1 月 31 日。然而，在 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));
  });
});
4

1 回答 1

6

添加pointRange，修复行为：

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

（来源）

于 2013-01-17T05:41:31.890 回答