2014-02-10 32 views
0

下面是海軍報堆棧圖表我js代碼,堆棧FLOT圖表工具提示與陣列內容

我想在其堆棧工具提示和d2的拉布勒[0]顯示d1的標籤[0]上的那部分堆棧

目前它沒有顯示任何工具提示。

數據示例:

d1 = [["Name1",10],["Name2",5]]; 
d2 = [["Name1",8],["Name2",10]]; 

因此工具提示應顯示名稱1(10)和名1(8)在各自的棧和 名稱2(5)和NAME2(10)在其respactive堆棧。

function getTooltip2(label, x, y) { 
    return "" + x + "(" + y +")"; 
} 

var d1 = []; 
var d2 = []; 
<?php 
for($i=0;$i<count($tchart)-1;$i++){ 
    echo "d1.push(['".$tchart[$i][0]."', ".$tchart[$i][1]."]);"; 
    echo "d2.push(['".$tchart[$i][0]."', ".$tchart[$i][2]."]);"; 
} 
?> 

var d4 = { label: "Within Benchmark", data: d1 }; 
var d5 = { label: "Out Of Benchmark", data: d2 }; 
var data =[d4,d5]; 

var stack = 0, 
    bars = true, 
    lines = false, 
    steps = false; 

function plotWithOptions() { 
    $.plot("#placeholder5", data, { 

     valueLabels: { 
      show: true 
     }, 
     series: { 
      stack: stack, 
      lines: { 
       show: lines, 
       fill: true, 
       steps: steps 
      }, 
      bars: { 
       show: bars, 
       barWidth: 0.6, 
       align: "center" 
      } 
     }, 
     xaxis: { 
      mode: 'categories', 
      tickLength: 0 
     }, 
     tooltip: true, 
     tooltipOpts: { 
      content: getTooltip2, 
      defaultTheme: false 
     }, 
     colors: [ "#51a351", "#da4f49"] 
    }); 
} 
plotWithOptions(); 
+0

你見過嗎? http://stackoverflow.com/a/18190027/839456 – anurupr

+0

是的,它的工作很好,謝謝。但我的要求就像我想顯示不同的系列,然後在工具提示中顯示x和y。可能嗎? – TechnoPulseLabs

+0

你想要顯示'Jan'而不是'January'吧? – anurupr

回答

0

好的,我找到了。和我們在其他條形圖中一樣。

下面是代碼我都用過,

$.plot("#placeholder6", [d8,d9], { 
    grid: { 
      hoverable: true 
    }, 
     valueLabels: { 
      show: true 
     }, 
     series: { 
      stack: stack, 
      lines: { 
       show: lines, 
       fill: true, 
       steps: steps 
      }, 
      bars: { 
       show: bars, 
       barWidth: 0.6, 
       align: "center" 
      } 
     }, 
     xaxis: { 
      //show:false, 
      mode: 'categories', 
      tickLength: 0 
     }, 
     yaxis: { 
      //show:false, 
      //mode: 'categories', 
      //tickLength: 0 
      tickDecimals:0 
     }, 
     tooltip: true, 
     tooltipOpts: { 
      content: "%x (%y)", 
      defaultTheme: false 
     }, 
     colors: [ "#faa732", "#da4f49"] 
    });