Question

我使用以下代码使用jqplot显示条形图。但即使我指定 trendline：{show：true} ，我也无法在条形图上绘制趋势线。

References I have used

    <script type="text/javascript" src="js/jqplot/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="js/jqplot/jqplot.barRenderer.min.js"></script>
    <script type="text/javascript" src="js/jqplot/jqplot.pieRenderer.min.js"></script>
    <script type="text/javascript" src="js/jqplot/jqplot.categoryAxisRenderer.min.js"></script>
    <script type="text/javascript" src="js/jqplot/jqplot.pointLabels.min.js"></script>
    <script type="text/javascript" src="js/jqplot/jqplot.canvasTextRenderer.min.js"></script>
    <script type="text/javascript" src="js/jqplot/jqplot.canvasAxisLabelRenderer.min.js"></script>
    <script type="text/javascript" src="js/jqplot/jqplot.dateAxisRenderer.min.js"></script>
    <link href="Css/blitzer/jquery-ui.css" rel="stylesheet" />
    <script src="Js/jqplot/jqplot.cursor.min.js"></script>
    <script src="Js/jqplot/jqplot.highlighter.min.js"></script>

Code:
 var AppleArray=[];
 var OrangeArray = [];
 var GrapeArray = [] ;
 var MangoArray =[];
 var PomegranateArray = [];
 var xAxisTicks =[];//It would be 00:01:03,02:01:03,04:01:04,06:01:04,08:01:04,10:01:03,12:01:03,14:01:03,16:01:06,18:01:04,20:01:05,22:01:08

 for(var Count = 0; Count < JsonResponse.length ;Count++)
 {
     //Fill the AppleArray,OrangeArray ,GrapeArray ,MangoArray ,Pomovalues from Json                  response
 }

 var TypeArray = [AppleArray, OrangeArray, GrapeArray, MangoArray, PomegranateArray];
 //Final TypeArray dynamic Value would be 1047,1049,1045,1046,1046,1046,1077,1048,1045,1046,1047,1045,669,717,742,696,1277,905,728,740,704,722,753,2127,1102,1079,1105,1070,1120,1095,1085,1077,1088,1139,1953,1452,1583,1649,1596,1587,1523,1539,2025,1653,1581,1797,2039,2012,1240,1219,1235,1203,1147,1289,1105,1194,1117,1209,1152,1208 
 plot1 = $.jqplot('chart1', TypeArray, {
    // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
    animate: !$.jqplot.use_excanvas,
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        pointLabels: { show: true },
        trendline: {show: true},
    },
    legend: {
        renderer: $.jqplot.EnhancedLegendRenderer,
        labels: legendLabels,
        show: true
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            rendererOptions: {
                seriesToggleReplot: { resetAxes: true },
                drawBaseline: false
            },
            ticks: xAxisTicks
        },
        yaxis: {
            //min : 500,
            min: 100,
            //tickInterval : 500,
            max: 2500
        }
    },
    highlighter: { show: false }
});

此代码仅显示以下条形图。不会在条形图上显示趋势线。如何在条形图上绘制趋势线？

Answer 1

您需要包含trendline插件才能使用它：

<script type="text/javascript" src="js/jqplot/jqplot.trendline.min.js"></script>
<script type="text/javascript" src="js/jqplot/jqplot.enhancedLegendRenderer.min.js"></script>

修改：请参阅工作示例here

与您的代码的唯一区别是我删除了legendLabels调用以避免错误。数据阵列是硬编码的。也许你的问题与你的数据创建有关（特别是你的TypeArray） - TypeArray必须是一个数组数组，而不是数组数组的数组。

JqPlot在条形图上显示趋势线

1 个答案: