jqplot 在条形图上显示趋势线答案

【问题标题】：jqplot show trendline over barchartjqplot 在条形图上显示趋势线
【发布时间】：2012-03-19 18:28:16
【问题描述】：

谁能告诉我如何使用下面的代码在我的条形图上显示趋势线。谢谢！

我正在使用 JqPlot 插件。这是迄今为止的代码...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <script language="javascript" type="text/javascript" src="excanvas.min.js"></script>
    <script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
    <script language="javascript" type="text/javascript" src="jqplot.categoryAxisRenderer.min.js"></script>
    <script language="javascript" type="text/javascript" src="jqplot.barRenderer.min.js"></script>


    <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />

    <script type="text/javascript">
        var planned = [70000,90000,120000,100000,];
        var actual = [80000,80000,150000,120000];
        var xAxis = ['Jan', 'Feb', 'Mar', 'Apr'];
        $(function() {  
            $.jqplot('chartDiv', [planned, actual], BarChart());
        });


        function BarChart()
        {
            var optionsObj = {
                title: 'Departmental Savings',
                axes: {
                     xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: xAxis,                       
                    },
                    yaxis: {
                        tickOptions: { showMark: false, formatString: "%d" },                       
                    },
                },

            grid: {
                    borderColor: "#fff",
                    background: "#FFF",
                    drawGridlines: false,
                    shadow: false
                }, 

                series: [
                    {label:'Planned'},
                    {label: 'Actual'}
                    ],

                legend: {
                    show: true,
                    location: 'sw',
                    xoffset: -70,
                    yoffset: -22,
                    },

                seriesDefaults:{
                    shadow: false,
                    renderer:$.jqplot.BarRenderer,
                    rendererOptions:{
                       barPadding: 0,
                       barMargin: 10,
                       barWidth: 25,
                   }

                },  
            };
            return optionsObj;
        }


    </script>

</head>

<body>

<div>
     <div id="chartDiv" />
    </div>
</div>
</body>
</html>

如您所见，我还有一些工作要做！上图是我目前所在的位置，下图是我完成后的样子！

边缘的绒毛是简单的 CSS 东西！

【问题讨论】：

你的趋势线代表什么？从您的示例图中，它看起来像计划的中点？

标签： jqplot bar-chart trendline

【解决方案1】：

这是一个示例，其中“趋势线”是计划和实际的平均值，在条形图上绘制为一条线：

我所做的只是添加带有趋势数据的第三个系列。在系列选项中，我将两个栏系列的“渲染器”设置为栏，将第三个作为默认行。小提琴here（你必须缓存JS文件，因为jqplot不允许盗链）。

    var planned = [70000,90000,120000,100000,];
    var actual = [80000,80000,150000,120000];
    var trend = [75000, 85000, 140000, 110000];
    var xAxis = ['Jan', 'Feb', 'Mar', 'Apr'];

    $(function() {  
        $.jqplot('chart1', [planned, actual, trend], BarChart());
    });


    function BarChart()
    {
        var optionsObj = {
            title: 'Departmental Savings',
            axes: {
                 xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: xAxis,                       
                },
                yaxis: {
                    tickOptions: { showMark: false, formatString: "%d" },                       
                },
            },

            grid: {
                borderColor: "#fff",
                background: "#FFF",
                drawGridlines: false,
                shadow: false
            }, 

            series: [
                {label:'Planned',renderer:$.jqplot.BarRenderer},
                {label: 'Actual',renderer:$.jqplot.BarRenderer},
                {label: 'Mean of Planned and Actual'}
                ],

            legend: {
                show: true,
                location: 'nw'
                },

            seriesDefaults:{
                shadow: false,

                rendererOptions:{
                   barPadding: 0,
                   barMargin: 10,
                   barWidth: 25,
               }

            },  
        };
        return optionsObj;
    }

【讨论】：

嗨，马克，太棒了！谢谢指导！设法让它看起来或多或少与屏幕截图相同......干杯！
你好，马克！也许你能帮上忙！我正在尝试限制网格中显示的点标签的数量！也许你知道怎么做？谢谢你的帮助！ stackoverflow.com/questions/9807451/…