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'
   }
   });
});
});