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條形圖可點擊的條形圖顯示不正確的信息

回答

相關問題