Question

我有这个小提琴JSfiddle

以下是转载的代码：

$(function () {
$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    xAxis: {
        categories: ['Heroku', 'Ruby','Lisp','Javascript','Python','PHP']
    },
    yAxis: {
        categories: ['low','medium','high'],
        title: {
            text: 'expertise',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    series: [{
        data: ['low','high','low','medium','medium']
    }]
});
});

如果你看小提琴，yAxis不会渲染，并且每个x类别都有一个值。我一直在看highcharts api，但我似乎无法做到这一点。代码对我有意义，但我显然做错了什么。有人能指出YAxis无法正确显示的原因吗？

Answer 1

正如我的评论所述，您需要提供类别的数值，而不是类别名称。

对于类别，数值是数组索引。

此外，在您的情况下，您尝试绘制值的方式，我会在开头添加一个空类别，否则您的第一个low类别会被标记为0，似乎没错。

所以，

categories: ['low','medium','high']

变为

categories: ['','low','medium','high'],

和

data: ['low','high','low','medium','medium']

变为

data: [1,3,1,2,2]

更新了小提琴：

http://jsfiddle.net/jlbriggs/k64boexd/3/

Answer 2

检查这个小提琴： http://jsfiddle.net/navjot227/k64boexd/2/

Trick是利用格式化程序功能。如果需要，您也可以在y轴标签上使用类似的格式化程序功能。虽然看起来你需要它来解决这个问题的数据标签。

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'bar'
    },
    xAxis: {
      categories: ['Heroku', 'Ruby', 'Lisp', 'Javascript', 'Python', 'PHP']
    },
    yAxis: {

      title: {
        text: 'expertise',
        align: 'high'
      },
      labels: {
        overflow: 'justify',

      }
    },
    tooltip: {
      valueSuffix: ' millions'
    },
    plotOptions: {
      bar: {
        dataLabels: {
          enabled: true,
          formatter: function() {
            if (this.y == 0) {

              return 'low'
            } else if (this.y == 1) {
              return 'medium'
            } else {
              console.log(this.y);
              return 'high'
            }
          }

        }
      }
    },
    series: [{
      data: [0, 2, 0, 1, 1]
    }]
  });
});

Answer 3

在我看来，线图不太可能具有y轴类别，因为它更多地说明数量或价值。在你的情况下，＆＃34;低，中，高＆＃34;说明范围，可以将任何值分配给某个范围。

因此，Highcharts接受数字形式的系列数据。但是，您可以通过在['low', 'medium', 'high']的{{1}}属性中设置category，然后将系列yAxis设置为与类别索引对应的数字数组来解决此问题，即data并调整工具提示以使用[0,1,1,2,...]属性显示类别而不是y值。

以下是代码：

formatter

以下是一个工作示例：JSFiddle

如何让Highcharts的yAxis显示类别而不是数字值？

3 个答案: