简体   繁体   English

如何在jqplot中自定义图表工具提示?

[英]How can I customize my chart tooltip in jqplot?

I have following chart. 我有以下图表。 I need to show MM/DD as my x-axis label. 我需要将MM/DD显示为我的x轴标签。 In tooltip I want to show HH:y-axis data. tooltip我想显示HH:y-axis数据。

IE: In the following chart I want 'Oct 15','Oct 16','Oct 17' as x-axis label and as tooltip I need to show '4.00,4' '6.00,7' etc. Now my tooltip showing x-axis label itself. IE:在下面的图表中我想要'4.00,4' '6.00,7' 'Oct 15','Oct 16','Oct 17' '4.00,4' '6.00,7' 'Oct 15','Oct 16','Oct 17'作为x轴标签和工具提示我需要显示'4.00,4' '6.00,7'等等现在我的工具提示显示x轴标签本身。

var line1 = [
    ['2013-10-15 4:00', 4],
    ['2013-10-16 6:00', 7],
    ['2013-10-17 9:00', 6]
];
var plot1 = $.jqplot('firstChart', [line1], {
    title: 'Server Activity',
    seriesDefaults: {
        rendererOptions: {
            varyBarColor: true,
            barWidth: 10
        }
    },
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            fontFamily: 'Georgia',
            fontSize: '10pt',
            angle: -40
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.DateAxisRenderer,
            tickOptions: {
                tickOptions: {
                    mark: 'outside',
                    show: true,
                    showLabel: true,
                    formatString: '%b %d, %Y %H:00',
                    fontSize: 11
                }
            },
            tickInterval: '1 day'
        },
        yaxis: {
            min: 0,
            tickOptions: {
                mark: 'inside',
                show: true,
                showLabel: true,
                formatString: '%d',
                fontSize: 11
            }
        }
    },
    highlighter: {
        show: true,
        sizeAdjust: 7.5
    },
    cursor: {
        show: false
    }
});

Try the following for the tooltip 请尝试以下工具提示

highlighter: {
                                tooltipContentEditor: function(current, serie, index, plot){
                                    var val = plot.data[serie][index];
                                    var valArr = val[0].split(" ");
                                    return valArr[1] + ', ' + val[1];
                                }
                            }

You can use the tooltipContentEditor option of the highlighter 您可以使用荧光笔的tooltipContentEditor选项

tooltipContentEditor: function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
var stringToReturn = '<table class="tooltip-info"> + '<tr><td>'+ '</td></tr>'+ </table>';                                       
return stringToReturn;
}               

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM