Question

我并不是新手，但我不是一个强大的用户＆＃34;无论是。

我在安全报告中有这些图表，几乎总是至少有一列没有显示任何值，因为该值太低，与其他列相比。

设计要求是这些没有工具提示，只有正在显示的数据。

也许我很厚，但当我认为我看到答案时我会尝试它并且它不起作用...例如我尝试设置＆＃34; min＆＃34;属性在x轴等，但没有运气。这可行吗？我假设如果是，我把属性放在错误的地方。

这是一个例子，看看第一列的代码示例......但它也在下面

JSFiddle链接：http://jsfiddle.net/ur58nae5/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
            backgroundColor: null,
            style: {
            fontFamily: 'helvetica, arial'
            }
        },
        colors:['#F5A623'],
        credits: false,
        title: {
            text: 'Attacks by Risk Score'
        },
        subtitle: {
            text: 'Number of malicious IPs seen in this period based on maximum risk score'
        },
        xAxis: {
            type: 'category',
            title: {
            text: "Risk Score"
            },
            labels: {
                rotation: 0,
                style: {
                    fontSize: '11px',
                    fontFamily: 'helvetica, arial, Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Number of IP Addresses'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            enabled: false
        },
        series: [{
            name: 'IPS',
            data: [
                ['1', 21],
                ['2', 109],
                ['3', 112],
                ['4', 125],
                ['5', 106],
                ['6', 112],
                ['7', 143],
                ['8', 207],
                ['9', 386],
                ['10', 908]

            ],
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                y: 10, // 10 pixels down from the top
                style: {
                    fontSize: '10px',
                    fontFamily: 'helvetica, arial, sans-serif',
                    textShadow: false,
                    fontWeight: 'normal'

                }
            }
        }]
    });

});

Answer 1

据我了解，您的问题是有时列太小而无法显示dataLabels。你有几个选择：您可以使用logarithmic比例来减少数据差异。 http://jsfiddle.net/ur58nae5/1/

    yAxis: {
        type:'logarithmic',
        title: {
            text: 'Number of IP Addresses'
        }
    },

或者您可以格式化小于某个阈值的点以将标签移到列

之外

series: [{
    name: 'IPS',
    data: [
        {x:1, y:21, dataLabels: { color:'#000', y:-15}},
        ['2', 109],
        ['3', 112],
        ['4', 125],
        ['5', 106],
        ['6', 112],
        ['7', 143],
        ['8', 207],
        ['9', 386],
        ['10', 908]

    ],
    dataLabels: {
        enabled: true,
        rotation: -90,
        color: '#FFFFFF',
        align: 'right',
        y: 10, // 10 pixels down from the top
        style: {
            fontSize: '10px',
            fontFamily: 'helvetica, arial, sans-serif',
            textShadow: false,
            fontWeight: 'normal'

        }
    }
}]

http://jsfiddle.net/ur58nae5/2/ http://jsfiddle.net/ur58nae5/3/

始终在highcharts柱形图中显示值

1 个答案: