具有分类 Y 轴的柱形图

Question

我正在尝试将类别分配给柱形图上的 Y 轴。我尝试过使用categories，但这会导致一个特殊的结果，列未到达X轴，并且值不正确

https://jsfiddle.net/fmgLa5h4/1/

我尝试过各种其他属性来纠正此问题，但无济于事。

我还尝试过使用 labels.formatter ，它得到了稍微更理想的结果，但标签与刻度线对齐 - 我再次尝试了其他方法来纠正这个问题，但没有成功

https://jsfiddle.net/fmgLa5h4/2/

Answer 1

您可以尝试使用 data.seriesMapping 映射数据并设置自己的 dataLabels 或类别，看一下这个示例：

var categories = ['A', 'B', 'C', 'D', 'E'],
  yAxisLabels = ['10', '20', '30', '40', '50'];

Highcharts.chart('container', {

  data: {
    csv: document.getElementById('data').innerHTML,
    seriesMapping: [{
      // x: 0, // X values are pulled from column 0 by default
      // y: 1, // Y values are pulled from column 1 by default
      label: 2 // Labels are pulled from column 2 and picked up in the dataLabels.format below
    }]
  },
  chart: {
    type: 'column'
  },
  title: {
    text: 'Daily runs'
  },
  xAxis: {
    minTickInterval: 24 * 36e5
  },
  yAxis: {
    labels: {
      formatter: function() {
        return yAxisLabels[this.value] + ', ' + this.value || '';
      },
    },

    tickInterval: 1,
    max: categories.length - 1,
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '{point.label}'
      },
    }
  }

});

对于格式化数据表， yAxis.labels.formatter 是一个不错的选择。在映射之前，您的数据可能需要格式化。

示例概念：

data = data.replace(/\r\n/g, '\n') // Unix
    .replace(/\r/g, '\n') // Mac
    .split('\n');
data.forEach(function(row, i){
    if (i) {
        row = row.split(',');
        data[i] = row.concat([
            categories.indexOf(row[1]),
            categories.indexOf(row[3])
        ]).join(',');
    }
});
data = data.join('\n');

现场演示：
https://jsfiddle.net/BlackLabel/g5svkrac/

API 参考：

https://api.highcharts.com/highcharts/yAxis.labels.formatter

https://api.highcharts.com/highcharts/data.seriesMapping

---

你的意思是定位标签，你可以使用 yAxis.labels.y 相对于刻度线位置的所有标签的位置偏移轴。

https://jsfiddle.net/BlackLabel/g5svkrac/1/