HighCharts项目符号图表标签显示在顶部可能吗?

时间:2019-04-05 11:24:22

标签: javascript highcharts bullet-chart

我想在图表的顶部而不是左侧显示此项目符号的标签,可以吗? 这是代码,

Highcharts.chart('container2', {
    xAxis: {
        categories: ['<span class="hc-cat-title">Profit</span><br/>%']
    },
    yAxis: {
        plotBands: [{
            from: 0,
            to: 20,
            color: '#666'
        }, {
            from: 20,
            to: 25,
            color: '#999'
        }, {
            from: 25,
            to: 100,
            color: '#bbb'
        }],
        labels: {
            format: '{value}%'
        },
        title: null
    },
    series: [{
        data: [{
            y: 22,
            target: 27
        }]
    }],
    tooltip: {
        pointFormat: '<b>{point.y}</b> (with target at {point.target})'
    }
});

这是项目符号图表。我想将我的标签利润显示在图表的顶部。

enter image description here 您还可以看到jsfiddle:Bullet chart

1 个答案:

答案 0 :(得分:1)

您可以将dataLabels属性与正确的选项一起使用:

series: [{
    data: [{
        dataLabels: {
            enabled: true,
            format: '<span class="hc-cat-title">Profit</span>',
            align: 'left',
            y: 40,
            inside: true
        },
        y: 275,
        target: 250
    }]
}]

实时演示:http://jsfiddle.net/BlackLabel/rxkt43o7/

API参考:https://api.highcharts.com/highcharts/series.column.data.dataLabels