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以及tickOptions xaxis的格式。

$(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
        }
    });
});

希望它有所帮助。

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

1 个答案: