Highcharts X-Axis标签为Text

时间:2013-10-15 12:42:14

标签: javascript highcharts

在此fiddle中,如果不更改系列数据,是否可以将x轴标签显示为文本,即{"apple","orange","mango"}而不是小数,即{0,1,2},而不是将标签与JSON分开并将其提供给类别。

$(function () {
    $('#container').highcharts({
        chart: {
        },
        xAxis: {

            labels: {
                enabled: true
            }
        },

        series: [{
            data: [["apple",29.9], ["orange",71.5], ["mango",106.4]]        
        }]
    });
});

3 个答案:

答案 0 :(得分:12)

试试这个:

 $(function () {

var seriesData = [["apple",29.9], ["orange",71.5], ["mango",106.4]];     
$('#container').highcharts({
    chart: {
    },
    xAxis: {
        tickInterval: 1,
        labels: {
            enabled: true,
            formatter: function() { return seriesData[this.value][0];},
        }
    },

    series: [{
        data: seriesData     
     }]
  });
});

DEMO

答案 1 :(得分:3)

您可以在catgories

中使用xAxis
xAxis: {
    categories: ["apple", "orange", "mango"],
}

我已经更新了你的小提琴:http://jsfiddle.net/Lq6me/1/

如果您不想使用类别,可以选择

labels: {
    formatter: function() {}
}

答案 2 :(得分:0)

无需手动进行操作,更好的解决方案是在xAxis块中传递 type:'category'。看下面的代码段

xAxis: {
        type: 'category',
        labels: {
          rotation: -45,
          style: {
                  fontSize: '13px',
                  fontFamily: 'Verdana, sans-serif'
               },
          }
     }