在highstock列上显示名称

时间:2014-07-23 10:12:42

标签: postgresql highcharts dns highstock

我必须在内部网络上绘制一个显示DNS查询的图表,因为我可以使用Highstock,如下所示:

DNS hits graph

我需要的是在工具提示上显示DNS的名称,DNS名称和点击数据存储在数据库中。

完整性代码:

<script type="text/javascript" charset="utf-8">

$(function () {
new Highcharts.StockChart({

    chart: {
        renderTo: 'dns_chart',
        type: 'column',
    },

    title: {
        text: 'DNS Hits by Sentinel Controller'
    },

    scrollbar: {
        enabled: true
    },

    rangeSelector: {
        buttons: [
            {type: 'hour',count: 1,text: '1h'},
            {type: 'day',count: 1,text: '1d'},
                            {type: 'day',count: 3,text: '3d'},
                            {type: 'day',count: 7,text: '1w'},
                            {type: 'day',count: 14,text: '2w'},
                            {type: 'month',count: 1,text: '1m'},
                            {type: 'year',count: 1,text: '1y'},
                            {type: 'all',text: 'all'}
        ],
        selected : 7
    },

    yAxis: {
        title: {text: 'Hits'}
    },

    xAxis: {
        title: { text: 'Domain name'}
    },

    tooltip: {
        crosshairs: [true,true],
        shared : true,
        pointFormat: '{series.name}: <b>{point.y} hits</b>'
    },

    legend: {
        enabled: true
    },

    series: [{
        name : 'DNS hits',
        dataGrouping : {
            enabled : false
        },
        data: ([
            <% @HighStock_result.each{ |row| %>
            [Date.UTC(<%=row['qt']%>),<%=row['hits']%>],
            <%}%>
        ]),
        dataGrouping: {
                approximation: "sum",
                enabled: true,
                forced: true,
                units: [['millisecond',[500]]],
        }
    }]
});

});
</script>

谢谢。

1 个答案:

答案 0 :(得分:0)

您需要在系列对象中添加此信息,如:

series:[{
   name: 'DNS Info',
   dnsName: 'DNS name',
   data:[1,2,3]
}]

然后在工具提示格式化程序(this.series.options.dnsName)或pointFormat中添加series.options.dnsName