绘制类别轴渲染器图的jqplot趋势线

Question

我提出了一个类似的问题，但我没有得到任何答案，所以我想再试一次。

我们用CategoryAxisRenderer绘制了一张图。图表显示良好。我们还需要将趋势线添加到该图中，就像在这里所做的那样：http://www.jqplot.com/deploy/dist/examples/customHighlighterCursorTrendline.html

我无法获得，我已经包含了trendline.min.js插件。然而，趋势线显示为图形中间的垂直线，这是不正确的。

有人能告诉我如何解决这个问题吗？

grdYTcks = ["10","19","10","31","23","0","11","10","9"];
grdXTcks = ["08/26","09/09","09/23","09/26","10/07","10/10","10/22","11/05","11/07"];
$.jqplot.config.enablePlugins = true;
plot1 = $.jqplot(grphOneID, [grdYTcks], {
            title: 'Highlighting, Dragging, Cursor and fsdfdsTrend Line',
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: grdXTcks,
                    tickOptions: {
                        formatString: '%d'
                    },
                    pad: 0
                },
                yaxis: {
                    min: -10,
                    max: 110,
                    tickInterval: 10,
                    tickOptions: {
                        formatString: '%d'
                    }
                }
            },
            highlighter: {
                sizeAdjust: 10,
                tooltipLocation: 'n',
                tooltipAxes: 'y',
                tooltipFormatString: '<b><i><span style="color:red;">hello</span></i></b> %.2f',
                useAxesFormatters: false
            },
            cursor: {
                show: true
            }
        });

Answer 1

grdYTcks和grdXTcks的格式错误。更改为：

var grdYTcks = [10, 19, 10, 31, 23, 0, 11, 10, 9];
var grdXTcks = ['08/26', '09/09', '09/23', '09/26', '10/07', '10/10', '10/22', '11/05', '11/07'];

这是我的测试代码，我更改了grdYTcks和grdXTcks的格式，以及xaxis的tickOptions的格式。

$(document).ready(function () {
    $.jqplot.config.enablePlugins = true;
    var grdYTcks = [10, 19, 10, 31, 23, 0, 11, 10, 9];
    var grdXTcks = ['08/26', '09/09', '09/23', '09/26', '10/07', '10/10', '10/22', '11/05', '11/07'];
    var plot1 = $.jqplot('chart_jqplot', [grdYTcks, grdXTcks], {
        title: 'Highlighting, Dragging, Cursor and fsdfdsTrend Line',
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: grdXTcks,
                tickOptions: {
                    formatString: '%#m/%#d'
                },
                pad: 0
            },
            yaxis: {
                min: -10,
                max: 110,
                tickInterval: 10,
                tickOptions: {
                    formatString: '%d'
                }
            }
        },
        highlighter: {
            sizeAdjust: 10,
            tooltipLocation: 'n',
            tooltipAxes: 'y',
            tooltipFormatString: '<b><i><span style="color:red;">hello</span></i></b> %.2f',
            useAxesFormatters: false
        },
        cursor: {
            show: true
        }
    });
});

希望能有所帮助。