Question

我遇到了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);
              }
          }
      });

Answer 1

1）函数showTooltip(x, y, contents)中的 x，y 参数实际上不是图表中的x，y值，bude x，y坐标放置工具提示的位置。工具提示值（工具提示中显示的文本）位于参数内容中，因此不是：

$('<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( {...

你需要这样的东西：

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

内容变量填满你需要的任何内容。

2）您需要设置模式选项

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

并使用选项显示条形图。在下面的jsfiddle示例中，我设置了lineWidth: 10并更改了一些颜色

3）布莱克关于时间戳的建议是正确的。（不解决条形可见性，但求解正确的x轴日期值），填充数据数组时，将它们乘以1000以便正确显示

这里是jsFiddle，看看它

JQuery Flot不绘制条形图+如何在工具提示中显示数据中的值？

1 个答案: