Flot和GraphTable - 來自表

的圖表我很新的flot和我的老闆已經要求我從一個html表格創建一個圖表成柱形圖。現在我不太有把握把我的數據庫中的數據轉換爲flot的格式化版本，但可以很容易地將它拉成html表格格式，所以我試圖在一小組樣本數據上做這件事，但沒有成功。這是我迄今爲止Flot和GraphTable - 來自表

現在的樣本數據如下： Sample

我想產生這樣的： chart

但是，當我嘗試它，我得到一個空的圖表所以在這裏我嘗試它：

HTML表設置

<table id="table1"> 
     <caption>Activity Scores</caption> 
     <thead> 
      <tr> 
       <th></th> 
       <th>Blue Team</th> 
       <th>Red Team</th> 
       <th>Yellow Team</th> 
       <th>Green Team</th> 
       <th>Purple Team</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <th>Activity #1</th> 
       <td>28</td> 
       <td>37</td> 
       <td>20</td> 
       <td>88</td> 
       <td>82</td> 
      </tr> 
      <tr> 
       <th>Activity #2</th> 
       <td>85</td> 
       <td>98</td> 
       <td>23</td> 
       <td>11</td> 
       <td>55</td> 
      </tr> 
      <tr> 
       <th>Activity #3</th> 
       <td>9</td> 
       <td>45</td> 
       <td>27</td> 
       <td>18</td> 
       <td>47</td> 
      </tr> 
      <tr> 
       <th>Activity #4</th> 
       <td>98</td> 
       <td>15</td> 
       <td>89</td> 
       <td>32</td> 
       <td>48</td> 
      </tr> 
      <tr> 
       <th>Activity #5</th> 
       <td>30</td> 
       <td>38</td> 
       <td>15</td> 
       <td>67</td> 
       <td>15</td> 
      </tr> 
      <tr> 
       <th>Activity #6</th> 
       <td>64</td> 
       <td>53</td> 
       <td>31</td> 
       <td>8</td> 
       <td>55</td> 
      </tr> 
      <tr> 
       <th>Activity #7</th> 
       <td>76</td> 
       <td>44</td> 
       <td>82</td> 
       <td>93</td> 
       <td>89</td> 
      </tr> 
      <tr> 
       <th>Activity #8</th> 
       <td>74</td> 
       <td>25</td> 
       <td>74</td> 
       <td>13</td> 
       <td>22</td> 
      </tr> 
      <tr> 
       <th>Activity #9</th> 
       <td>80</td> 
       <td>70</td> 
       <td>72</td> 
       <td>60</td> 
       <td>57</td> 
      </tr> 
      <tr> 
       <th>Activity #10</th> 
       <td>11</td> 
       <td>31</td> 
       <td>75</td> 
       <td>15</td> 
       <td>56</td> 
      </tr> 
      <tr> 
       <th>Activity #11</th> 
       <td>46</td> 
       <td>84</td> 
       <td>36</td> 
       <td>79</td> 
       <td>40</td> 
      </tr> 
      <tr> 
       <th>Activity #12</th> 
       <td>9</td> 
       <td>55</td> 
       <td>37</td> 
       <td>24</td> 
       <td>43</td> 
      </tr> 
      <tr> 
       <th>Activity #13</th> 
       <td>78</td> 
       <td>74</td> 
       <td>51</td> 
       <td>68</td> 
       <td>85</td> 
      </tr> 
      <tr> 
       <th>Activity #14</th> 
       <td>13</td> 
       <td>90</td> 
       <td>80</td> 
       <td>76</td> 
       <td>69</td> 
      </tr> 
     </tbody> 
    </table>

我的JS

 <script type="text/javascript" charset="utf-8"> 
     $(document).ready(function() { 
      // put all your jQuery goodness in here. 
      $("#table1").each(function() { 

       var colors = ['red','blue','green','yellow','purple']; 
       $("#table1 thead th:not(:first)").each(function() { 
        colors.push($(this).css("color")); 
       }); 

       $(this).graphTable({ 
        series: 'columns', 
        position: 'replace', 
        width : '100%', 
        height: '325px', 
        colors: colors 
       }, { 
        series: { 
         bar: { 
          show: true, 
          label: { 
           show: true, 
           formatter: function(label, series){ 
            return '<div style="font-size:10px;text-align:center;padding:5px 7px;color:#FFF;text-shadow:none; background-color:#555;">'+label+'<br>'+Math.round(series.percent)+'%</div>'; 
           }, 
           background: { opacity: 0.8 } 
          } 
         } 
        }, 
        legend: { 
         show: false 
        }, 
        grid: { 
         hoverable: false, 
         autoHighlight: false 
        } 
       }); 
      }); 
     }); 
     </script>

任何和所有的幫助，歡迎！

來源

2013-02-06 Johan Rheeder

瀏覽器控制檯中是否有錯誤？ – DNS

看起來像graphTable不喜歡行標題中的名稱，它需要數字。添加此行到您的graphTable選項會得到它的圖：

xaxisTransform: function(s){ 
    return (s.replace('Activity #','')); 
}

你也需要更正bar到bars如DNS說。

來源

2013-02-06 14:31:48 Tim

按照你的建議添加，並用'bars'代替'bar'但是沒有運氣仍然是空白圖並且沒有錯誤 –

我不確定那麼[這裏是]（http://jsfiddle.net/CedarMadness/yAW6V/）where我測試了它，並在那裏工作。 – Tim

我看到你在沒有X軸標籤的情況下工作，但是它們是堆疊的，就像你從上面的例子中看到的那樣，我不想讓它堆疊在一起，而是使用「Activity＃」標籤彼此相鄰。我已經看到它，但我不能讓這個爲我工作。不過，我明白，你真的知道它顯示的數據 –

bar:選項實際上應該是bars:，儘管這可能不是唯一的問題，因爲否則它應該仍然顯示行。

來源

2013-02-06 14:11:56 DNS

Flot和GraphTable - 來自表

回答

相關問題