Question

是否可以拥有＆＃34;名称＆＃34;系列中每个对象的键是x轴标签？

    series: [{
        "data": [3570.5],
            "name": "R",
            "id": 0
    }, {
        "data": [3000],
            "name": "S",
            "id": 1
    }, {
        "data": [2500],
            "name": "T",
            "id": 2
    }]

例如，我希望第1列的x轴标签为＆＃34; R＆＃34;，第2列的x轴标签为＆＃34; S＆＃34;等等。尝试过分配x轴类别

xAxis: {categories: ['R', 'S', 'T']}

但只有＆＃34; R＆＃34;标签显示在x轴上。我也尝试过不同的格式化系列：

        series: [{
        "data": [3570.5, null, null],
        "name": "R",
        "id": 0
    }, {
        "data": [null, 3000, null],
        "name": "S",
        "id": 1
    }, {
        "data": [null, null, 2500],
        "name": "T",
        "id": 2
    }]

但这使得我可以轻松更改系列可见性变得复杂，即自动调整两个轴的大小，隐藏整个列，然后在尝试再次显示时将隐藏的列放回原始位置。

plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        var id = this.series.options.id;
                        var chart = $('#container').highcharts();
                        var isVisible = chart.get(id).visible;
                        chart.get(id).setVisible(!isVisible);
                    }
                }
            }
        }
    }

http://jsfiddle.net/calanoue/suw6xweh/

Answer 1

您正在正确设置xAxis类别。但是，你只是设置了一个点。 Highcharts默认为指向0（＆＃34; R＆＃34;）。尝试设置xAxis类别索引并使用{x, y}点格式：

series: [{
    data: [{x:0, y:3570.5}],
        name: "R",
        id: 0
}, {
    data: [{x:1, y:3000}],
        name: "S",
        id: 1
}, {
    data: [{x:2, y:2500}],
        name: "T",
        id: 2
}]

x:值是您要填充的类别索引。

Answer 2

您可以尝试为每个数据点添加名称，如下所示 DEMO。

$(function () {



var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column',

    },
    xAxis: {
      categories: ['R', 'S', 'T'],


    },
    plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        changeSeriesVisibility(this.series.options.id);
                    }
                }
            }
        }
    },
    series: [{
        data : [{ x : 0,
                 y : 3750,
                 name : "R"},
                {
                    x : 1,
                    y: 3000,
                    name: "S"
                },
                {
                    x : 2,
                    y : 2500,
                    name : "T"
                }
               ]
    },

        ]
});

function changeSeriesVisibility(id) {
    // Hide/Show the series on click

    var chart = $('#container').highcharts();
    var isVisible = chart.get(id).visible;
    chart.get(id).setVisible(!isVisible);
}
});

Highcharts - 将系列名称添加为X轴标签

2 个答案: