我对Highcharts并不完全陌生,但是我也不完全是“超级用户”。

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

设计要求是这些没有工具提示,仅显示数据。

也许我正在变胖,但是当我认为我看到答案时,我尝试了一下,但它不起作用...例如,我尝试在x轴上设置“ min”属性,等等,但是没有运气。这可行吗?我假设是的话,我会将属性放在错误的位置。

这是一个示例,请看其中的第一列代码示例...但是它也在下面

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'

                }
            }
        }]
    });

});

最佳答案

据我了解,您的问题是有时列太小而无法显示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/

关于javascript - 始终在 Highcharts 柱形图中显示值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39414147/

10-12 12:30
查看更多