`
ligangbin117
  • 浏览: 1561 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

jqplot 饼图显示多个值的方法

阅读更多
客气要求显示的时候要显示百分比和数量两个值。api是这样写的
dataLabels
this.dataLabels = 'percent'
Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices.  Defaults to percentage of each pie slice.
只以单独用label 或者value或者percent,并不能一起用。然后就上网找,找到一篇相关的文章
http://moliniao.iteye.com/blog/1621647
但是觉得好复杂,又仔细想了一下,除了那三个值不是可以用数组来显示吗,所以我只要把我想要显示的东西拼成数组不就只可以了。。。源码如下:
$.getJSON("equipment_getLineLossbyDataLayer.action",{dataType:dataType, dataDate:dataDate},  function(json) {
$.each(json, function(i) {
   var data;
   eval("data="+json[i]);
   var labelsArr=new Array();
   var total = 0;
   for(var i in data) {
   total += data[i][1];
   }
   for(var i in data) {
   labelsArr[i] = (data[i][1]/(total==0?1:total)*100)+"%," + data[i][1];
   }

   var plot1 = jQuery.jqplot('starvation', [ data ], {
   seriesColors: [ "#6A6AFF", "#00FFFF", "#FF5151", "#00EC00", "#E800E8 ", "#9F35FF",
   "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"],
   seriesDefaults : {
   renderer : jQuery.jqplot.PieRenderer,
   rendererOptions : {
   showDataLabels : true,
   dataLabels: labelsArr,
   dataLabelFormatString: '%s'
   }
   },
   legend : {
   show : true,
   location : 'e',
   marginRight: '40px',
   fontSize: '8pt'
   }
   });
});
});
分享到:
评论

相关推荐

    jqplot柱状-饼图

    `pieTest.html`可能包含了一个或多个饼图的例子,展示了如何设置切片的标签、颜色、阴影等属性。 重绘(replot)是jqPlot的一个重要功能,允许我们在图表数据更新时动态地刷新图表。这在实时数据更新或者交互式应用...

    简单jQplot创建引擎(支持线图/饼图/柱状图)

    jQplot的饼图创建同样简单,数据结构为每个部分的值和对应的标签。例如: ```javascript var pieData = [ { label: "部分1", data: 30 }, { label: "部分2", data: 25 }, { label: "部分3", data: 45 } ]; $....

    jqplot

    "Charts jqPlot.htm" 可能是另一个教程或示例集,包含了更多关于 jqPlot 图表的实例。而 "Charts jqPlot_files" 文件夹通常包含了教程或示例中所引用的 CSS、JavaScript 文件和图片资源,确保示例在本地环境下能够...

    jqplot饼状图示例

    2. **准备数据**:饼状图的数据是以二维数组的形式提供的,每一项包含两个值,第一个是类别名,第二个是对应的数值或百分比。 ```javascript var data = [['类别1', 30], ['类别2', 20], ['类别3', 25], ['类别4', ...

    jqPlot图表中文API

    - `seriesColors`:定义默认分类的颜色,当有多个分类时,会按顺序分配这些颜色。 - `stackSeries`:如果设为true,表示每个分类的值将是前一个分类值的累计,适用于堆积图。 - `title`:图表的标题,可以通过对象...

    jquery jqPlot API 中文使用教程

    如果设置为 `true` 并且存在多个系列,则每个系列在纵轴上的值将等于前面所有系列纵轴值的总和加上自身的值。 2. **图表标题配置 (title)** - `text`: 图表标题文本。 - `show`: 是否显示图表标题。 3. **坐标...

    Jqplot-Jquery数据图插件

    在“jquery.jqplot.1.0.0b2_r1012”这个压缩包中,包含了该版本的Jqplot源码和其他相关资源,下面我们将详细探讨Jqplot的主要特点和使用方法。 1. **图表类型** Jqplot支持多种图表类型,包括折线图、柱状图、饼图...

    jqplot绘图工具

    此外,线状图还支持多个数据系列,方便对比不同数据集的变化。 2. **柱状图**:柱状图则适用于比较不同类别的数据量。jqPlot允许你自定义柱子的颜色、宽度和排列方式,同时还可以设置柱子的阴影效果,增强图表的...

    jquery.jqplot图表源码

    1. **多图表类型**:jqPlot支持多种图表类型,如线性图、柱状图、饼图、散点图、雷达图等,满足不同场景的数据展示需求。 2. **数据动态更新**:通过Ajax或其他方式动态获取数据并更新图表,实现图表的实时性。 3....

    jqplot js图标控件

    **jqPlot**是一款基于JavaScript库**jQuery**的图表绘制插件,主要用于在Web页面上创建各种数据可视化图表,包括但不限于柱状图、折线图、饼图、散点图等统计图表。它提供了丰富的定制选项,可以满足用户对图表样式...

    jqplot 简易示例

    jqPlot以其高度可定制性、灵活性和强大的功能著称,适合各种类型的数据可视化需求,包括折线图、柱状图、饼图等。 **jqPlot的核心特点** 1. **易用性**:jqPlot的API设计简洁,使得开发者能够快速地创建图表。通过...

    jqplot图表插件

    在本文中,我们将深入探讨jqPlot的基本使用方法、主要功能以及如何通过实例应用来创建一个柱状图。 首先,我们来看一下jqPlot的基本结构。要使用jqPlot,你需要在HTML文件中引入jqPlot的JavaScript库和CSS样式表。...

    jQuery插件:jqplot图表绘制插件详解

    jqPlot有多个内置插件,如鼠标追踪器(Cursor)、工具提示(Tooltip)和图例(Legend)。同时,用户也可以根据需求编写自定义插件。 7. **数据源** 数据可以是数组、JSON格式或其他动态加载方式,如AJAX。jqPlot...

    JQUERY JQPLOT包

    - **多图表**:在一个页面上可以同时展示多个jqPlot图表,通过独立的配置和数据管理,互不影响。 ### 5. jqPlot与JSP图形 在Java服务器页面(JSP)开发中,jqPlot可以通过JavaScript与后端Java服务进行交互,接收...

    jqplot例子以及文档

    这些示例涵盖了基本的图表类型、自定义轴和标记、颜色方案、数据点标记等多个方面。通过学习这些例子,你可以快速上手并掌握jqPlot的基本用法。 四、jqPlot文档详解 jqPlot的文档详尽且实用,包含了API参考、示例...

    jqPlot Option配置对象详解

    当有多个分类且分类数量不超过颜色列表长度时,会依次使用这些颜色。如果分类数量超过颜色列表,颜色会从头开始循环。 `stackSeries`属性控制分类是否堆叠。当设为`true`时,每个分类的值将是它前面所有分类的总和...

    asp.net中绘制饼图与棒图

    1. **jQuery插件:** jQuery库提供了很多插件,如jqPlot、Chart.js或Highcharts,它们支持在ASP.NET中绘制饼图。例如,jqPlot提供了丰富的选项和方法,可以自定义颜色、标签、数据点等,使饼图更具交互性。 2. **MS...

    jqplot配置参数.docx

    如果设置为`true`,并且有多个分类(对于线图来说就是多条线),那么每个分类在坐标轴上的值将是它前面所有分类的值之和加上自身的值。这在展示累计数据或者比较不同分类的总贡献时非常有用。 `axisDefaults`是用于...

    前端项目-jqPlot.zip

    - **柱状图(Bar Charts)**:可以是垂直的或水平的,还可以设置堆叠显示,用于对比多个数据系列。 - **饼图(Pie Charts)**:饼图用于显示各部分相对于整体的比例,可以自定义切片的颜色、标签和阴影效果。 **...

    jQuery图表(jqPlot,Highcharts)

    然后,通过jQuery选择器选取元素,并调用`.jqplot()`方法,传入配置对象,即可生成图表。 2. **图表类型**:jqPlot支持多种图表,如线性图、面积图、饼图、条形图、雷达图等,通过设置`series`数组和`renderer`参数...

Global site tag (gtag.js) - Google Analytics