Question

JSFiddle link

我在到达此之前将所有日期转换为纪元毫秒。最初日期的格式为“2017-12-31T00：00：00”。我似乎无法弄清楚为什么x轴标签错误地显示2018年1月，而数据点工具提示显示2017年12月。我期待2017年1月至2017年12月的x轴标签。如果我遗漏任何东西，请告诉我。感谢。

Highcharts.chart('container', {
  "credits": {
    "text": "",
    "href": ""
  },
  "chart": {},
  "title": {
    "text": ""
  },
  "plotOptions": {
    "series": {
      "cursor": "pointer",
      "animation": false
    }
  },
  "xAxis": {
    "type": "datetime",
    "dateTimeLabelFormats": {
      "month": "%b %Y"
    },
    //format: "{value:%Y-%m-%d}",
    "labels": {
      "useHTML": true
    },
    "tickInterval": 2592000000
  },
  "yAxis": [{
    "labels": {
      "format": "{value:.0f}",
      "style": {
        "color": "#BB5B55"
      }
    },
    "lineWidth": 1,
    "title": {
      "text": "Total",
      "style": {
        "color": "#BB5B55"
      }
    }
  }, {
    "title": {
      "text": "Trend (%)",
      "style": {
        "color": "#5187B9"
      }
    },
    "lineWidth": 1,
    "labels": {
      "format": "{value}%",
      "style": {
        "color": "#5187B9"
      }
    },
    "opposite": true
  }],
  "tooltip": {
    "shared": true,
    "useHTML": true
  },
  "legend": {
    "align": "center",
    "verticalAlign": "bottom",
    "backgroundColor": "#FFFFFF"
  },
  "series": [{
    "name": "Total",
    "type": "column",
    "yAxis": 0,
    "data": [
      [1485842400000, null],
      [1488261600000, null],
      [1490936400000, null],
      [1493528400000, null],
      [1496206800000, null],
      [1498798800000, null],
      [1501477200000, null],
      [1504155600000, null],
      [1506747600000, null],
      [1509426000000, null],
      [1512021600000, null],
      [1514700000000, null]
    ],
    "tooltip": {
      "valueSuffix": "",
      "valueDecimals": 0
    }
  }, {
    "name": "Trend (%)",
    "type": "spline",
    "yAxis": 1,
    "data": [
      [1485842400000, null],
      [1488261600000, null],
      [1490936400000, null],
      [1493528400000, null],
      [1496206800000, null],
      [1498798800000, null],
      [1501477200000, null],
      [1504155600000, null],
      [1506747600000, null],
      [1509426000000, null],
      [1512021600000, null],
      [1514700000000, 0.8005]
    ],
    "tooltip": {
      "valueSuffix": " %",
      "valueDecimals": 2
    }
  }]
});

Answer 1

Highcharts＆＃39;默认轴渲染将根据start显示最近的节点。

因此，如果您每个月都显示一个标签，那么从12月31日开始的最接近的月份是1月。

我通常通过确保每月需要一个标签并且每月发送一个数据点来解决这个问题，我在数据中提供的日期值是该月的第一天而不是最后一天

如果您不想更改来源的数据，您可以添加预处理功能，在发送到图表之前用javascript更新日期。

HighCharts错误的xAxis标签

1 个答案: