Question

我想使用系列的dataLabel属性的x and y attributes。但是highcharts忽略了我的设置。这是JSFiddle，在第64/65行我设置了x，y属性。

let formatterHelper = 0;
Highcharts.chart('container', {

  chart: {
    type: 'columnrange',
    inverted: true
  },

  title: {
    text: 'Title'
  },

  xAxis: {
    categories: ['aaa', 'bb', 'cc', 'dd', 'ee', 'ff'],
    title: {
      text: 'Y-Axes'
    }
  },

  yAxis: [{
    title: {
      text: ''
    },
    type: 'datetime'
  }, {
    title: {
      text: 'Second X-Axes'
    },
    linkedTo: 0,
    type: 'datetime',
    tickInterval: 24 * 3600 * 1000
  }],

  tooltip: {
    formatter: function () {
      const title = '<b>' + this.series.name + '</b><br/>';
      const from = Highcharts.dateFormat('%H:%M', new Date(this.point.low));
      const to = Highcharts.dateFormat('%H:%M', new Date(this.point.high));
      return title + from + '-' + to;
    }
  },

  series: [{
    name: 'Series 1',
    grouping: false,
    cursor: 'pointer',
    color: 'rgba(0,255,0,0.5)',
    dataLabels: {
      enabled: true,
      style: {
        fontSize: '10px'
      },
      formatter: function () {
        if (formatterHelper < this.series.data.length) {
          formatterHelper++;
          return 'IO: ' + this.point.io;
        } else if (formatterHelper >= this.series.data.length && formatterHelper < this.series.data.length * 2) {
          formatterHelper++;
          if (formatterHelper === this.series.data.length * 2) {
            formatterHelper = 0;
          }
        }
      },
      x: 100, // NOT WORKING
      y: 100, // NOT WORKING
      allowOverlap: true
    },
    point: {
      events: {
        click: function () {
          alert('Category: ' + this.category + ', value: ' + this.y);
        }
      }
    },
    data: [
      {low: Date.UTC(2017, 1, 1, 7, 5), high: Date.UTC(2017, 1, 1, 8, 1), io: 441},
      {low: Date.UTC(2017, 1, 1, 11, 15), high: Date.UTC(2017, 1, 1, 11, 35), io: 98},
      {low: Date.UTC(2017, 1, 1, 13, 10), high: Date.UTC(2017, 1, 1, 14, 6), io: 187},
      {low: Date.UTC(2017, 1, 1, 14, 8), high: Date.UTC(2017, 1, 1, 15, 35), io: 239},
      {low: Date.UTC(2017, 1, 1, 17, 6), high: Date.UTC(2017, 1, 1, 20, 3), io: 142},
      {low: Date.UTC(2017, 1, 1, 23, 55), high: Date.UTC(2017, 1, 2, 0, 20), io: 290}
    ]
  }, {
    name: 'Series 2',
    pointWidth: 10,
    dataLabels: {
      enabled: false
    },
    color: 'rgba(0,0,255,0.5)',
    data: [
      {low: Date.UTC(2017, 1, 1, 7, 1), high: Date.UTC(2017, 1, 1, 7, 10)},
      {low: Date.UTC(2017, 1, 1, 11, 1), high: Date.UTC(2017, 1, 1, 11, 20)},
      {low: Date.UTC(2017, 1, 1, 13, 1), high: Date.UTC(2017, 1, 1, 13, 15)},
      {low: Date.UTC(2017, 1, 1, 14, 1), high: Date.UTC(2017, 1, 1, 14, 15)},
      {low: Date.UTC(2017, 1, 1, 17, 1), high: Date.UTC(2017, 1, 1, 17, 15)},
      {low: Date.UTC(2017, 1, 1, 23, 50), high: Date.UTC(2017, 1, 2, 0, 3)}
    ]
  }]

});

要发布此问题，我需要添加更多详细信息，因此请忽略这些最后一行。 You know that 72.6% of the devs on stackoverflow are webdevs？

Answer 1

标签未按预期工作，因为columnRange.series.datalabel没有属性x或y。您需要使用xHigh或xLow。

将此示例更改为xHigh和yHigh而不是像这样的x和y将起作用：

series: [{
  dataLabels: {
    xHigh: 100, 
    yHigh: 100, 
    ...
  },
  ...
}]

工作示例： http://jsfiddle.net/ewolden/Ld6pc4h7/11/

Highcharts列范围dataLabel x，y定位被忽略

1 个答案: