0

我对 JQuery Flot 图表有疑问。它根本不显示条形图（data_campaigns），但（data_campaigns2）显示得很好。

我还想知道如何在工具提示中显示两个图表中的数据。现在工具提示只显示随机 X 和 Y 变量，但我希望它显示点击量。

//Chart - Campaigns
      $(function () {
var data_campaigns = [
[1359766800,8],[1359853200,4],[1359939600,11],[1360026000,11],
[1360112400,15],[1360198800,12],[1360285200,16],[1360371600,7],
[1360458000,9],[1360544400,6],[1360630800,13],[1360717200,12],
[1360803600,6],[1360890000,13],[1360976400,3],[1361062800,9],
[1361149200,18],[1361235600,18],[1361322000,12],[1361408400,14],
[1361494800,7],[1361581200,5],[1361667600,3],[1361754000,9],
[1361840400,15],[1361926800,14],[1362013200,4],[1362099600,0],
[1362186000,0],[1362272400,0]];

var data_campaigns2 = [
[1359766800,8],[1359853200,4],[1359939600,11],[1360026000,11],
[1360112400,15],[1360198800,12],[1360285200,16],[1360371600,7],
[1360458000,9],[1360544400,6],[1360630800,13],[1360717200,12],
[1360803600,6],[1360890000,13],[1360976400,3],[1361062800,9],
[1361149200,18],[1361235600,18],[1361322000,12],[1361408400,14],
[1361494800,7],[1361581200,5],[1361667600,3],[1361754000,9],
[1361840400,15],[1361926800,14],[1362013200,4],[1362099600,0],
[1362186000,0],[1362272400,0]];

        var plot = $.plot($("#placeholder"),
            [ { data: data_campaigns,color:"rgba(0,0,0,0.2)", shadowSize:0, 
            bars: {
              show: true,
              lineWidth: 0,
              fill: true,
              fillColor: { colors: [ { opacity: 1 }, { opacity: 1 } ] }
          }
      } , 
      { data: data_campaigns2, 

          color:"rgba(255,255,255, 0.4)", 
          shadowSize:0,
          lines: {show:true, fill:false}, points: {show:false},
          bars: {show:false},
      }  
      ],     
      {
        series: {
         bars: {show:true, barWidth: 0.6}
     },
     grid: { show:false, hoverable: true, clickable: false, autoHighlight: true, borderWidth:0   },
      yaxis: {
            min: 0
        },
        xaxis: {
            tickDecimals: 0
        }



 });



        function showTooltip(x, y, contents) {


            console.log(x+","+y);

            var d = new Date(contents *1000);
            var curr_date = d.getDate();
            var curr_month = d.getMonth();
            curr_month++;
            var curr_year = d.getFullYear();

            $('<div id="tooltip"><div class="date">'+curr_date + "." + curr_month + "." + curr_year+'<\/div><div class="title text_color_3">'+x+'%<\/div> <div class="description text_color_3">CTR<\/div><div class="title ">'+y+'<\/div><div class="description">Clicks<\/div><\/div>').css( {
                position: 'absolute',
                display: 'none',
                top: y - 125,
                left: x - 40,
                border: '0px solid #ccc',
                padding: '2px 6px',
                'background-color': '#fff',
                opacity: 10
            }).appendTo("body").fadeIn(200);
        }

        var previousPoint = null;
        $("#placeholder").bind("plothover", function (event, pos, item) {
            $("#x").text(pos.x.toFixed(2));
            $("#y").text(pos.y.toFixed(2));
            if (item) {
                if (previousPoint != item.dataIndex) {
                  previousPoint = item.dataIndex;
                  $("#tooltip").remove();
                  var x = item.datapoint[0].toFixed(2),
                  y = item.datapoint[1].toFixed(2);
                  showTooltip(item.pageX, item.pageY,
                    x);
              }
          }
      });
4

1 回答 1

0

1) the x, y parameters in function showTooltip(x, y, contents) are actually not x,y values from your chart, bude x, y coordinates where to place the tooltip at. The tooltip value (text displayed in tooltip) is in parameter contents, so instead of:

$('<div id="tooltip"><div class="date">'+curr_date + "." + curr_month + "." + curr_year+'<\/div><div class="title text_color_3">'+x+'%<\/div> <div class="description text_color_3">CTR<\/div><div class="title ">'+y+'<\/div><div class="description">Clicks<\/div><\/div>').css( {...

you need something like this:

$('<div id="tooltip">' + contents + '<\/div>').css({...

with contents variable filled with whatever you need.

2) you need to set mode option

xaxis: {
    mode: 'time',
    ...
}

and play a bit with the options to display bars. in the jsfiddle example below i set the lineWidth: 10 and changed some colors

3) Blake's advice about the timestamps is right. (not solving the bar visibility, but solving the correct x axis date values), when populating the data array, multiply them by 1000 to be displayed correctly

here is the jsFiddle, have a look at it

于 2013-08-27T08:53:41.713 回答