jquery - JQPlot 折线图上的自定义工具提示

Question

我正在尝试为折线图获取自定义工具提示，因为我希望工具提示更详细地描述点而不是该点的值。(附图进一步解释了我的意思)

我已经尝试过如何做到这一点。

下面是我的代码:

<script type="text/javascript">        $('#page3a').live('pageshow', function () {
        var s1 = [1, 2, 3, 4, 5];
        var s2 = ["Message 1", "Message 2", "Message 3", "Message 4", "Message 5"];

        var lineGraph1 = $.jqplot('lineGraph1', [s1,s2], {

            animate: true,
            seriesDefault: {
                showMarker: false,
                pointLabels: { show: true }
            },

            grid: {
                drawBorder: false,
                drawGridlines: false,
                background: '#eafaff',
                shadow: false
            },
            axesDefaults: {
                show: false,

                showTicks: false,
                showTickMarks: false

            },

            highlighter: {
                show: true,
                sizeAdjust: 8,
                tooltipLocation: 'n',
                tooltipAxes: 'piered',
               formatString:'%s',
                fadeTooltip: true,
                tooltipFadeSpeed: "fast",
                useAxesFormatters: false

            }

        });
    });</script>

任何帮助将不胜感激。 :)

Answer 1

有一个配置选项，允许您提供一个自定义回调方法，调用该方法来检索工具提示内容:

highlighter: {
    tooltipContentEditor: function (str, seriesIndex, pointIndex) {
        return str + "<br/> additional data";
    },

    // other options just for completeness
    show: true,
    showTooltip: true,
    tooltipFade: true,
    sizeAdjust: 10,
    formatString: '%s',
    tooltipLocation: 'n',
    useAxesFormatters: false,
}