`
暗夜骑士0376
  • 浏览: 81290 次
  • 性别: Icon_minigender_1
  • 来自: 信阳
社区版块
存档分类
最新评论

jqplot 的一些补充

 
阅读更多
最近实用jqplot,要求在pie chart 上显示label,和value,并且具有highlight的功能,对于pie来说,应该是原生不支持的,需要我们自己去添加功能。到网上找了一下,发现国内的网站全是将参数介绍一下,几乎内容是一样的,最后还是在stackoverflow中找到答案。代码如下:
function pieCommon(target,data,options) {
  if (data == undefined || !$.isArray(data)){
    return;
  }
  var rawData = data[0];
  var inputLabels = [];
  var inputValues =[];
  for (var key in rawData) {
      inputLabels[key] = rawData[key][0];
      inputValues[key] = rawData[key][1];
  }
  $.jqplot.postDrawHooks.push(function() {       
        var swatches = $('table.jqplot-table-legend tr td.jqplot-table-legend-swatch');
        var labels = $('table.jqplot-table-legend tr td.jqplot-table-legend-label');
        labels.each(function(index) {
            //turn the label's text color to the swatch's color
            var color = $(swatches[index]).find("div div").css('background-color');
            $(this).css('color',color );
            //set type name as the label's text
            $(this).css('white-space', 'nowrap'); //otherwise Heavy Industry M12 will be in 3 lines
            $(this).html(inputLabels[index]);
        });
    });
    var total = 0;
    for (var i = 0; i < counts.length; i++) {
        total += inputValues[i];
    }
    var resultData = [];
    var precision = 2;
    var percentageSoFar = 0;
    for (var i = 0; i < counts.length; i++) {
        var count = counts[i];
        //get value 
        var percentage = parseFloat((count / total * 100).toFixed(precision));
        if (i == counts.length - 1) {
        /*
         * if we would use just '100 - percentageSoFar' instead
         * in case we add 20 as the 4th value to counts array
         * we will get 29.849999999999994
         */
            percentage = parseFloat((100 - percentageSoFar).toFixed(precision));
            console.log("last count is = " + count + "; percentage is = " + percentage);
        }
        percentageSoFar += percentage;
        var row = [inputLabels[i] + ":" + percentage , percentage];
        resultData.push(row);
    }
    var plot = jQuery.jqplot(target, [resultData], {
        seriesDefaults: {
            renderer: jQuery.jqplot.PieRenderer,
            rendererOptions: {
                showDataLabels: true,
                // Add a margin to seperate the slices.
                sliceMargin: 4,
                // stroke the slices with a little thicker line.
                lineWidth: 5,
                dataLabelPositionFactor: 1.35,
                dataLabels: 'label',
                dataLabelFormatString: '%s'
            }
        },
        legend: {
            show: true,
            location: 'ne',
            placement: "outside"
        }
    });
    
    //add highlight function 
    $('#' + target).bind('jqplotDataHighlight', 
    function (ev, seriesIndex, pointIndex, data, radius) {    
      var chart_left = $('#' + target).offset().left,
      chart_top = $('#' + target).offset().top,
        x = ev.pageX,  // convert x axis unita to pixels
        y = ev.pageY;  // convert y axis units to pixels
      var color = 'rgb(50%,50%,100%)';
      if ($('#'+ target + 'tooltip1b').length <= 0){
        var tips = $('<div></div>');
        tips.attr('id',target + 'tooltip1b');
        $('#' + target).append(tips);
      }
      $('#'+ target + 'tooltip1b').css({
        left:chart_left+x+5, 
        top:chart_top+y,
        position: 'absolute',
        zIndex: 99,
        backgroundColor:'#FFFFFF'
        });
      $('#'+ target + 'tooltip1b').html('<span style="font-size:14px;font-weight:bold;color:' + 
      color + ';">' + data[0] + '</span><br />');
      
      $('#'+ target + 'tooltip1b').show();
    });
   
     // Bind a function to the unhighlight event to clean up after highlighting.
    $('#'+ target).bind('jqplotDataUnhighlight', 
      function (ev, seriesIndex, pointIndex, data) {
          if ($('#'+ target + 'tooltip1b')) {
            $('#'+ target + 'tooltip1b').empty();
            $('#'+ target + 'tooltip1b').hide();
          }
      });
}



同理bar chart的增加tooltip的code
$('#chart').bind('jqplotDataHighlight', 
        function (ev, seriesIndex, pointIndex, dt) {
            var mouseX = ev.pageX; //these are going to be how jquery knows where to put the div that will be our tooltip
            var mouseY = ev.pageY;
            var color = '#666';
            if ($('#chartpseudotooltip').length <= 0) {
                var toolstip = $('<div></div>').attr('id','chartpseudotooltip');
                $("#chart").append(toolstip);
            }
            
            $('#chartpseudotooltip').html('<span style="font-size:14px;font-weight:bold;color:' + 
      color + ';">' + data[pointIndex][0] + ', ' + dt[1]  + '</span>');
            var cssObj = {
                  'position' : 'absolute',
                  'left' : mouseX + 'px', //usually needs more offset here
                  'top' : mouseY + 'px',
                  'backgroundColor': 'rgba(208, 208, 208, 0.5)'
                };
            $('#chartpseudotooltip').css(cssObj);
            $('#chartpseudotooltip').show();
       }
    );    

    $('#chart').bind('jqplotDataUnhighlight', 
        function (ev) {
          $('#chartpseudotooltip').hide();
        }
    );
分享到:
评论
3 楼 Mr_pop 2014-02-14  
  
2 楼 zkx1217 2013-07-13  
请教下,画Pie chart 时,总共有三部分,其中2部分占的比例比较小,比如一个1%,一个2%,这样就看不清那个是那个了。jqplot  可以画个箭头,将这个比较显示到pieChart外面吗? 谢谢。
1 楼 ligangbin117 2013-01-30  
我觉得还有更简单的方法,这边要求也是显示百分比和数量两个值。可以先把要显示的东西组装成一个数组,然后显示数组就可以了。
$.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

    **jqPlot 概述** jqPlot 是一个基于 jQuery 的数据可视化库,专为网页上的数据图表展示设计。它提供了一套全面的API,使得开发者能够方便地创建各种复杂的图表,如折线图、柱状图、饼图以及散点图等。jqPlot 被誉为...

    jqplot文档

    ### jqPlot文档解析 #### 简介 jqPlot 是一个纯 JavaScript 绘图插件,为 jQuery 提供了强大的图表绘制功能。该插件版本为 1.0.8,自 2009 年至 2015 年由 Chris Leonello 开发并维护。它支持在个人或商业项目中...

    jqplot例子

    **jqPlot 概述** jqPlot 是一个基于 jQuery 的数据可视化库,用于创建高质量的、交互式的图表。它提供了一套全面的API和各种图表类型,适用于数据展示和分析。jqPlot 具有高度可定制性,允许用户通过配置选项自定义...

    jqPlot图表中文API

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

    jqplot js图标控件

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

    jqplot1.0.4

    《jqPlot 1.0.4:打造丰富的数据可视化图表》 jqPlot 是一款功能强大的JavaScript图表库,专为Web应用程序提供丰富的数据可视化解决方案。在版本1.0.4中,它延续了其一贯的优秀特性,使得创建饼状图、柱状图、线状...

    jqplot的Option配置详解

    ### jqplot的Option配置详解 #### 一、引言 jqPlot是一款强大的JavaScript图表库,它基于jQuery构建,能够帮助开发者轻松地创建出各种复杂的图表。对于初学者来说,掌握jqPlot的核心配置对象—Option配置对象是十分...

    jqplot饼状图示例

    **jqPlot饼状图示例** jqPlot是一个强大的JavaScript库,用于在网页上创建动态、交互式的图表。它提供了一套丰富的选项和插件,使得数据可视化变得简单易行。在本示例中,我们将专注于如何使用jqPlot来创建饼状图,...

    jqplot使用手册 参数手册 中文手册

    **jqPlot简介** jqPlot是基于JavaScript的图表库,它提供了丰富的图表类型,如曲线图、柱状图和饼图,适用于数据可视化需求。这款开源工具以其灵活性和易用性著称,允许开发者轻松地创建交互式图表,适用于网页应用...

    jqplot1.0.8_优秀且完全免费的JS图表插件

    用JS作图形报表,有多个插件可选择,其中HighCharts、JqPlot、JsChart是使用比较多的,但HighCharts和JsChart只能用作个人使用、为了以后项目中能使用,很多人选择JqPlot(个人和商业都免费)。俺最近开发项目进要...

    jqplot 简易示例

    **jqPlot简介** jqPlot是基于JavaScript的图表绘制库,它允许开发者在网页上创建出交互式的、富有视觉吸引力的图表。jqPlot以其高度可定制性、灵活性和强大的功能著称,适合各种类型的数据可视化需求,包括折线图、...

    jquery.jqplot图表源码

    **jQuery.jqPlot图表源码详解** jQuery.jqPlot是一款基于JavaScript的开源图表库,它提供了丰富的图表类型,包括折线图、柱状图、饼图、散点图等,适用于网页上的数据可视化。该库设计简洁,易于使用,允许开发者...

    jquery charts插件jqplot

    **jQuery图表插件jqPlot详解** jqPlot是jQuery的一个强大插件,专为创建美观、交互式的图表而设计。在Web开发中,数据可视化是一项重要的任务,jqPlot提供了一个易于使用且功能丰富的解决方案,使开发者能够轻松地...

    jquery.jqplot 绘图插件

    **jqPlot绘图插件详解** jqPlot是基于jQuery的一款强大而灵活的图表绘制插件,它提供了丰富的功能,能够帮助开发者轻松创建出各种类型的图表,包括但不限于线状图、柱状图、饼图等。这款插件以其简洁的API和高度...

    jqplot柱状图示例

    **jqPlot柱状图详解** jqPlot是一款强大的JavaScript图表库,它允许开发者在网页上创建交互式的、高质量的图表。柱状图是数据可视化中常用的一种图表类型,它以竖直的柱子长度来表示各类别数据的大小,非常适合展示...

    fusionChars,highchars,jqplot绘图插件Demo

    `jqPlot`是一款强大的JavaScript图表绘制插件,它提供了丰富的图表类型和高度自定义的选项,使得开发者能够轻松地在网页上创建出交互式的、美观的数据图表。本DEMO——"fusionChars, highchars, jqplot绘图插件Demo...

    Jqplot-Jquery数据图插件

    **Jqplot - jQuery数据图插件** Jqplot是一款基于jQuery库的开源图表插件,主要用于在网页上创建各种动态、交互式的数据可视化图表。它以其丰富的图表类型、高度可定制性和良好的性能赢得了广大开发者的青睐。在...

    jqplot-饼图例子

    没啥可描述的,就是用jqplot做的例子,无语了,这还有文字限制,一点都不自由。

    jqplot折线图和柱状图

    jqPlot是一款基于JavaScript的开源图表库,用于在Web页面上绘制动态、交互式的图表。它提供了丰富的选项和插件,可以生成多种类型的图表,包括折线图和柱状图。以下是对 jqPlot 在生成折线图和柱状图方面的详细说明...

Global site tag (gtag.js) - Google Analytics