flot条形图可点击的条形图显示不正确的信息

我试图做到这一点，当点击我图形上的条形图时，该特定条形的x轴标签被打印出来/显示在一个范围内。我的最终目标是让点击条形图时在下面创建另一个条形图，以显示有关该特定条形的更多详细信息，在第一个图形上思考广泛的信息，并在单击条形图时显示更详细的信息在下面的另一个条形图中。在我的分贝flot条形图可点击的条形图显示不正确的信息

测试表：

X ------------- Ÿ
0 ----------- 1000
1 ----------- 2000
2 ----------- 3000
3 ----------- 4000
4 - --------- 5000
5 ----------- 6000
6 ----------- 7000
7 ----------- 8000
8 ----------- 9000

查询：

$sql = "SELECT * FROM flotTest"; 
    $result = mysqli_query($dbc3, $sql); 

    while($row = mysqli_fetch_assoc($result)) 
    { 
     $dataset1[] = array($row['x'],$row['y']); 
    }

海军报记者：

 // BAR CHART 
     var percentagehrs = []; 
     for (var i = 0; i <= 8; i += 1){ 
     percentagehrs.push([i, parseInt(Math.random() * 200)]); 
} 
     var dataset = [{ 
      label: "Percentage Hours", 
      data: percentagehrs, 
      color: "#5482FF" }]; 

     //x-axis label and index pulled from database (testing purposes) 
     //I'm thinking this might be where my issue is 

     var ticks = <?php echo json_encode($dataset1); ?>; 

     $(document).ready(function() { 
      $.plot($("#group-flot-placeholder"), dataset, { 
      series: { 
       bars: { 
        show: true, 
        clickable: true 
       } 
      }, 
      bars: { 
       align: "center", 
       barWidth: 0.8 
      }, 
      xaxis: { 
       axisLabel: "Job Number", 
       axisLabelUseCanvas: true, 
       axisLabelFontSizePixels: 12, 
       axisLabelFontFamily: 'Verdana, Arial', 
       axisLabelPadding: 10, 
       ticks: ticks 
      }, 
      yaxis: { 
       axisLabel: "Percent", 
       axisLabelUseCanvas: true, 
       axisLabelFontSizePixels: 12, 
       axisLabelFontFamily: 'Verdana, Arial', 
       axisLabelPadding: 3, 
       tickFormatter: function (v, axis) { 
        return v + "%"; 
       } 
      }, 
      grid: { 
       clickable: true, 
       hoverable: true, 
       borderWidth: 2, 
       backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }, 
       markings: [ { xaxis: { from: -1, to: 12 }, yaxis: { from: 100, to: 300 }, color: "#FFA5A5" }] 
      } 
     }); 
      $("#group-flot-placeholder").UseTooltip(); 

      $("#group-flot-placeholder").bind("plotclick", function (event, pos, item) { 
      if (item) { 
       $("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label); 
       plot.highlight(item.series, item.datapoint); //Output here is: - click point 0(0 being the position of the first bar) in Percentage Hours 
      } 
     }); 

     });

我在做什么错了，我怎样才能让这个被点击一个特定的酒吧时，我可以从我的数据库中提取数据到另一个柱状图下方为那个特定的酒吧？

来源

2014-01-29 MikeOscarEcho

你可以用这个做一个jsfiddle，只是为了更清楚。？ – Sergio

@Sergio http://jsfiddle.net/MKWB6/这基本上就是它现在的样子。最大的不同是我正在解析数据库中的数据，就像你上面看到的那样，它说var ticks = <？php echo json_encode（$ dataset1）; ？> 我将编辑上面的内容来显示我的sql和表。 – MikeOscarEcho

你不说什么<?php echo json_encode($dataset1); ?>解决，但它应该在的形式：

var ticks = [[0,"A"],[1,"B"],[2,"C"],[3,"D"],[4,"E"],[5,"F"],[6,"G"],[7,"H"],[8,"I"]];

所以，在你click回调：

$("#group-flot-placeholder").bind("plotclick", function (event, pos, item) { 
    if (item) { 
     var tickClicked = item.series.xaxis.ticks[item.dataIndex].label;   
     $("#clickdata").text(tickClicked); 
    } 
});

这里有一个fiddle demonstration。

来源

2014-01-29 15:27:37 Mark

编辑我的帖子，以显示什么json_encode（$ dataset1）解决编辑：只是试过你的点击回调，它的工作。我现在得到的工作号码显示从X轴，谢谢。你对我的第二个问题有什么建议吗？ – MikeOscarEcho

@MikeOscarEcho，是第二个问题“点击后如何显示aecond plot？”如果是这样，这是一个非常广泛的问题，但简而言之，我会：在点击处理程序中，将AJAX调用回PHP以获取适合该列的数据，在AJAX调用的成功处理程序中，我将使' $ .plot'调用。 – Mark

flot条形图可点击的条形图显示不正确的信息

回答

相关问题