java - 如何在 jqplot 中自定义图表工具提示？

Question

我有以下图表。我需要显示MM/DD为我的 x 轴标签。在tooltip我想显示HH:y-axis数据。

IE：在下面的图表中，我想要'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
    }
});

Answer 1

尝试以下工具提示

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

Answer 2

您可以使用荧光笔的 tooltipContentEditor 选项

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