【问题标题】:HighCharts Bullet Chart label show on top Possible?HighCharts 子弹图标签显示在顶部 可能吗?
【发布时间】:2019-04-05 11:24:22
【问题描述】:

我想在图表顶部而不是左侧显示此子弹图的标签。可以吗? 这是代码,

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})'
    }
});

这是子弹图。我想在图表顶部显示我的标签利润。

也可以看jsfiddle:Bullet chart

【问题讨论】:

    标签: javascript highcharts bullet-chart


    【解决方案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

    【讨论】:

    • 它显示在对面。我需要显示在顶部...看顶部的图像
    • 嗨@Shanto Siddiq,很抱歉误会您的问题。我已经编辑了我的答案。
    • 感谢@ppotaczek 的回答,但工具提示中没有显示标签(利润)你能帮我吗?
    • 嗨@Shanto Siddiq,没问题,您可以使用headerFormat 属性作为工具提示:jsfiddle.net/BlackLabel/vesxkp9b
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多