jqplot tooltipContentEditor 显示错误的 x 和 y 值

Question

我有一个 jqplot 线图，其中包含以下线条:

`var line = [[1,0.493],
            [1,1.286],
            [2,0.305],
            [2,0.516],
            [2,0.551],
            [2,0.595],
            [2,0.609],
            [2,0.644],
            [2,0.65],
            [2,1.249],
            [2,1.265],
            [4,0.443],
            [5,0.288],
            [5,0.477],
            [5,0.559],
            [5,0.562],
            [6,0.543],
            [7,0.513],
            [7,0.549],
            [8,0.442],
            [8,0.467],
            [8,0.468],
            [8,0.597],
            [8,0.857]];`

我使用 tooltipContentEditor 显示悬停点的 x 和 y 值。我需要准确显示的值。

这是我使用的代码:http://jsfiddle.net/ZQh38/1/

问题:

1. 有时，显示的 x 和 y 值不正确。例如，最后一个点位于 (6, 0.5) 和 (7, 0.5)

2. 这些值仅显示 1 位小数，需要为 3。

所以，问题是，如何获得准确的 y 值？ 我还尝试使用 pointIndex，它与行中的值不匹配。

感谢您的帮助!

Answer 1

以下是您问题的解决方案:jsFiddle example

我对您的荧光笔选项进行了更改。

/* 
Drawing graphs
 */
var Statistics = {
    scatter: false,
    trendline: false,
    enableLabels: true,
    showAverage: false,
    colour: null,

    //Graph properties
    scatterPlot: function(on){
        Statistics.scatter = on;
    },
    showTrendline: function(on){
        $.jqplot.config.enablePlugins = on;
        Statistics.trendline = on;
    },
    disableLabels: function(yes){
        Statistics.enableLabels = (!yes);
    },
    shouldDrawScatter: function(){
        return (!Statistics.scatter);
    },
    useLabels: function(){
        return Statistics.enableLabels;
    },
    getTrendline: function(){
        return Statistics.trendline;
    },

    //Drawing
    drawLabels: function(){
        document.getElementById('ylabel').innerHTML = Statistics.ylabel;
        document.getElementById('xlabel').innerHTML = Statistics.xlabel;
    },

    generateGraph: function(){
        var line = [[1,0.493],
                [1,1.286],
                [2,0.305],
                [2,0.516],
                [2,0.551],
                [2,0.595],
                [2,0.609],
                [2,0.644],
                [2,0.65],
                [2,1.249],
                [2,1.265],
                [4,0.443],
                [5,0.288],
                [5,0.477],
                [5,0.559],
                [5,0.562],
                [6,0.543],
                [7,0.513],
                [7,0.549],
                [8,0.442],
                [8,0.467],
                [8,0.468],
                [8,0.597],
                [8,0.857]];

            var plot = $.jqplot('chart', [line], {
                animate: true,
                grid:{backgroundColor: 'white'},
                axes: {
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: [1, 2, 3, 4, 5, 6, 7],
                        tickOptions: {
                            fontFamily: '"Helvetica", cursive',
                            fontSize: '12pt'
                        }
                    },
                    yaxis: {
                        tickOptions: {
                            fontFamily: '"Helvetica", cursive',
                            fontSize: '12pt'
                        },
                        max: 2,
                        min: 0
                    }
                },
                series:[{
                    color: "#594A42",
                    lineWidth: 2.5,
                    shadow: false,
                    fillColor: "#594A42",
                    markerOptions: {
                        style:'filledCircle', 
                        color: "#594A42", 
                        shadow: false, 
                        size: 10
                    },
                    showLine: false,
                    trendline: {
                        color: '#999'
                    },
                    rendererOptions:{
                        animation: {
                            speed: 2000 //Speeding up animation
                        }
                    }
                }],
                highlighter: {
                    show: true,
                    fadeTooltip: true,
                    sizeAdjust: 6,
                    tooltipContentEditor: function(str, pointIndex, index, plot){
                        var splitted = plot._plotData[1][index];
                        var x = splitted[0];
                        var y = splitted[1];
                        return x + ", " + y;
                    }
                }
            });
    },
    //Checks if the graph will be a straight line
    straightLine: function(lineArray){
        if(typeof lineArray != 'undefined' && lineArray.length > 0) {
            for(var i = 1; i < lineArray.length; i++)
            {
                if(lineArray[i] !== lineArray[0])
                return false;
            }
        } 
        return true;
    },

};

Statistics.generateGraph();