Jquery图形报表插件 jqplot简介及参数详解

简介

jqPlot是一款高度交互性、功能强大的jQuery图表插件。它支持线图、柱状图、饼图、气泡图、散点图等多种图表类型，并且可以使用自定义颜色、字体和样式。此外，它还支持图表的动态更新和多图表显示。使用jqPlot可以极大地简化绘制复杂图表的过程，并且无需复杂的配置即可快速上手。

安装

首先，我们需要下载jqPlot插件，可以从 官方网站 上获取最新版本的文件。将文件解压后，将jquery.jqplot.js、jquery.jqplot.css、jqplot.*.js等文件复制到项目中并引入即可。

<!-- 引入jqPlot主文件 -->
<script src="js/jquery.jqplot.js"></script>
<link rel="stylesheet" href="css/jquery.jqplot.css" />

<!-- 引入需要使用的图表类型 -->
<script src="js/jqplot.barRenderer.js"></script>
<script src="js/jqplot.categoryAxisRenderer.js"></script>
<script src="js/jqplot.pointLabels.js"></script>

示例

下面我们通过两个示例来讲解jqPlot的使用和参数配置。

示例一：柱状图

<div id="barChart" style="height: 300px;width: 400px;"></div>

$(document).ready(function(){
  // 数据
  var data = [
    ['Jan', 20],
    ['Feb', 25],
    ['Mar', 35],
    ['Apr', 20],
    ['May', 40],
    ['Jun', 30]
  ];

  // 创建柱状图
  var plot = $.jqplot('barChart', [data], {
    // 设置图表类型和渲染器
    seriesDefaults: {
      renderer: $.jqplot.BarRenderer,
      rendererOptions: { 
        barWidth: 30,
        barPadding: 5,
        barMargin: 15,
        shadowAngle: 135,
        shadowOffset: 1.5,
        shadowWidth: 3,
        shadowDepth: 3,
        highlightMouseOver: false
      }
    },
    // 设置横坐标
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer
      }
    },
    // 设置数据标签
    series: [{
        label: 'My Data',
        color: '#38761d',
        pointLabels: {
          show: true,
          location: 'n',
          edgeTolerance: -12
        }
    }],
    // 设置图表标题和图例
    title: {
      text: 'My Bar Chart'
    },
    legend: {
      show: true,
      placement: 'outsideGrid'
    }
  });
});

在代码中，我们首先定义了一个div，然后在JavaScript中绑定数据和配置项，创建一个柱状图，并将之呈现在div中。其中，seriesDefaults可以设置默认的系列属性，axes用于设置坐标轴，series用于设置系列，title和legend分别用于设置图表的标题和图例。

示例二：饼图

<div id="pieChart" style="height: 300px;width: 400px;"></div>

$(document).ready(function(){
  // 数据
  var data = [['Firefox',37.33],['Chrome',32.95],['Safari',12.34],['IE',6.82],['Opera',2.91],['Other',7.65]];

  // 创建饼图
  var plot = $.jqplot('pieChart', [data], {
    // 设置图表类型和渲染器
    seriesDefaults: {
      renderer: $.jqplot.PieRenderer,
      rendererOptions: {
        startAngle: -90,
        sliceMargin: 2,
        diameter: 250,
        shadowAlpha: 0.08
      }
    },
    // 设置每个部分的属性
    series:[
      {
        rendererOptions: {
          sliceOffset: 0,
          // 设置每个部分的颜色
          sliceColors:["#EDC240", "#AFD8F8", "#CB4B4B", "#FDB515", "#4DA74D", "#9440ED"]
        },
        // 设置每个部分的标签
        pointLabels: {
          show: true,
          formatString: '%s: %d%%'
        }
      }
    ],
    // 设置图表标题和图例
    title:{
      text: 'Browser Percentage'
    },
    legend:{
      show:true,
      placement: 'outside'
    }
  });
});

代码中首先定义了一个div，然后在JavaScript中绑定数据和配置项，创建一个饼图，并将之呈现在div中。其中，seriesDefaults可以设置默认的系列属性，series用于设置系列，title和legend分别用于设置图表的标题和图例。

参数详解

在上面的示例中，我们已经介绍了jqPlot中的一些参数，下面我们将结合表格的形式，详细讲解常用参数的作用：

参数名	说明
seriesDefaults	默认系列化设置
series	设置系列属性
axesDefaults	默认坐标轴设置
axes	同series
grid	等同于CSS中样式border
legend	图例定义
highlighter	鼠标移入时，高亮部分
cursor	鼠标指针样式
seriesColors	设置显示的系列颜色
shadow	设置阴影的大小和颜色

---

至此，我们已经基本掌握了jqPlot插件的使用方法和参数配置，希望这份攻略对你有所帮助。