highchartjs为列创建标签

时间:2015-12-01 15:23:09

标签: javascript jquery highcharts

您好我有一个显示服务器的列表。 X轴显示它们的使用量,Y轴计算它们。现在我已经为每个组(我的意思是所有服务器上的服务器,如“0-5%”)一组服务器名称。当我像这里一样悬停它们时,我想在右上角显示这个数组:Link

这是我已经拥有的代码obj是计算服务器的数组:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Server Disk root used in %'
        },
        subtitle: {
            text: 'All Linux Servers'
        },
        xAxis: {
            type: 'category',
            labels: {
                rotation: -45,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Anzahl Server'
            }
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        tooltip: {
            pointFormat: 'Anzahl Server: <b>{point.y}</b>'
        },
        series: [{
            name: 'Server',
            data: [
                ['0-5%',   obj2],
                ['5-10%',  obj5],
                ['10-15%', obj8],
                ['15-20%', obj11],
                ['20-25%', obj14],
                ['25-30%', obj17],
                ['30-35%', obj20],
                ['35-40%', obj23],
                ['40-45%', obj26],
                ['45-50%', obj29],
                ['50-55%', obj32],
                ['55-60%', obj35],
                ['60-65%', obj38],
                ['65-70%', obj41],
                ['70-100%',obj44]

            ],
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                format: '{point.y}', // one decimal
                 y: 5,// 5 pixels down from the top
                style: {


     fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    }]
});
});

这是我的图表的图片:

enter image description here

当悬停看起来像我想要dsiplay的数组 obj1 = ["server11", "server1125", "server1127"] 对于每一列,都有一个数组,就像这个数组是0-5%列的数组。

2 个答案:

答案 0 :(得分:3)

您需要使用工具提示定位器功能并定义要显示它的x,y坐标。

  positioner: function () {
            return { x: 500, y: 30 };
        }

See the fiddle here

答案 1 :(得分:0)

您提供的链接可以回答它。不确定你被困在哪里?你能详细说明一下吗?

您需要在plotOptions中使用mouseOver和mouseOut事件函数来定义将鼠标悬停在数据点上时需要显示的内容。