Question

任何人都可以告诉我我需要用下面的代码做什么来在我的条形图上显示趋势线。谢谢！

我正在使用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东西！

enter image description here

Answer 1

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

enter image description here

我所做的就是添加第三个关于趋势数据的系列。在系列选项中，我将“渲染器”设置为两个条形系列的条形，将第三个设置为默认线条。小提琴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;
    }

jqplot在条形图上显示趋势线

1 个答案: