好不容易抽出时间将Jqplot做下最后的总结,下面通过四个例子来学习Jqplot的一些常见技巧:
示例1. 设置线条颜色(包括背景色及线条颜色的批量赋值)

<!DOCTYPE html>
<html>
<head>
    <title>Jqplot Testing</title>
    <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
    <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
 <div ></div>
    <script type="text/javascript" class="code">
    $(document).ready(function(){
        var d1 = [[0, -10.3], [1, 7.0], [2, 15.7], [3, 0.5], [4, -10.4], [5, 1.1], [6, 13.2],[7, 1.8], [8, -4.5], [9, -1.8], [10, 2.0], [11, 3.0], [12, -3.5], [13, -7.4], [14, -11.3]];
        var d2 = [[0, 1.3], [1, 12.8], [2, -8.2], [3, -5.2], [4, 16.4], [5, -5.3], [6, 8.1],[7, 15.1], [8, -4.4], [9, 7.8], [10, -1.4], [11, 0.2], [12, 1.3], [13, 11.7], [14, -9.7]];

        var plot1 = $.jqplot('Chart1', [d1, d2], {
            grid: {
                drawBorder: false,
                shadow: false,
                //The background color of the whole chart.
                background: '#FFFFFF'
            },
            highlighter: { show: true },
            seriesDefaults: { 
                shadowAlpha: 0.1,
                shadowDepth: 2,
                fillToZero: true
            },
            series: [
                {
                    color: 'red',
                    showMarker: true,
                    showLine: true,
                    markerOptions: {
                        style: 'filledCircle',
                        size: 8
                    },
                    rendererOptions: {
                        smooth: true
                    }
                },
                {
                    color: 'yellow',
                    showMarker: true,
                    showLine: true,
                    rendererOptions: {
                        smooth: true,
                    },
                    markerOptions: {
                        style: 'filledSquare',
                        size: 8
                    },
                }
            ],
            axes: {
                xaxis: {
                    pad: 1.0,
                    tickOptions: {
                      showGridline: false
                    }
                },
                yaxis: {
                    pad: 1.05
                }
            }
        });
    });
    </script>
    <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
    <script class="include" type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
</body>
</html>
View Code

相关文章:

  • 2022-01-21
  • 2022-02-23
  • 2022-12-23
  • 2021-07-07
  • 2021-12-09
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-11-27
  • 2021-12-16
  • 2021-07-03
相关资源
相似解决方案