绘制类别轴渲染图的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格式，也xaxistickOptions。

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

希望它有帮助。