Question

问题是x轴刻度线出现在每个其他单元格的中心。我希望他们居中。

这是我的小提琴例子：

https://jsfiddle.net/udeleng/ry10Lc6q/6/

Highcharts.chart('container', {
  "chart": {
    "type": "heatmap",
    "zoomType": "x",
    "panning": true,
    "panKey": "shift"
  },
  "title": {
    "text": null
  },
  "colorAxis": {
    "stops": [
      [0, "#3060cf"],
      [0.5,"#fffbbc"],
      [0.9,"#c4463a"]
    ]
  },
  "xAxis": {
    "lineColor": "#ffffff",
    "labelsx": {
      "useHTML": true,
      "style": {
        "color": "#6e6e70"
      }
    },
    "type": "datetime"
  },
  "legend": {
    "enabled": false
  },
  "yAxis": {
    "title": {
      "text": null
    }
  },
  "plotOptions": {
    "series": {
      "cropThreshold": 100000,
      "turboThreshold": 0
    }
  },
  "series": [
    {
      "borderWidth": 0,
      "tooltip": {
        "headerFormat": "",
        "pointFormat": "{point.value}"
      },
      "data": [
        {
          "x": 1493622000000,
          "y": 0,
          "value": 1.4
        },
        {
          "x": 1493622000000,
          "y": 1,
          "value": 0.9
        },
        ...
      ],
      "colsize": 86400000
    }
  ]
});

如果改为使用series.data数组属性，则使用CSV选项（与数据模块一起）添加该数据，然后将刻度线居中：

https://jsfiddle.net/udeleng/xetj9Lds/4/

Highcharts.chart('container', {
  "chart": {
    "type": "heatmap",
    "zoomType": "x",
    "panning": true,
    "panKey": "shift"
  },
  data: {
    firstRowAsNames: false,
    csv: document.getElementById('csv').innerHTML
  },
  "title": {
    "text": null
  },
  "colorAxis": {
    "stops": [
      [0, "#3060cf"],
      [0.5,"#fffbbc"],
      [0.9,"#c4463a"]
    ]
  },
  "xAxis": {
    "lineColor": "#ffffff",
    "labelsx": {
      "useHTML": true,
      "style": {
        "color": "#6e6e70"
      }
    },
    "type": "datetime"
  },
  "legend": {
    "enabled": false
  },
  "yAxis": {
    "title": {
      "text": null
    }
  },
  "plotOptions": {
    "series": {
      "cropThreshold": 100000,
      "turboThreshold": 0
    }
  },
  "series": [
    {
      "borderWidth": 0,
      "tooltip": {
        "headerFormat": "",
        "pointFormat": "{point.value}"
      },
      "colsize": 86400000
    }
  ]
});

我希望不必每次都弄清楚刻度线的位置，间距或其中的任何一个，因为在使用csv时它似乎可以正常工作。

我无法使用CSV，因为我需要为每个数据点关联附加元数据，而对象的series.data数组允许这样做。

Answer 1

您有不同的x值。请比较：

console.log(new Date(1493622000000));
console.log(new Date('2017-05-01'));

结果：

Mon May 01 2017 09:00:00 GMT+0200
Mon May 01 2017 02:00:00 GMT+0200

实时演示： https://jsfiddle.net/BlackLabel/k84sqmeh/

高图热图xAxis刻度线对齐

1 个答案: