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