私は flot を初めて使用し、上司から html テーブルから縦棒グラフにグラフを作成するように依頼されました。現在、DB からデータを flot 用にフォーマットされたバージョンにプルする自信はありませんが、html テーブル形式に簡単にプルできるため、データの小さなサンプル セットでこれを実行しようとしましたが、成功しませんでした。これは私がこれまでに持っているものです
サンプルデータは次のようになります。
そして、私はこれを作りたい：
しかし、私がそれを試みると、空のチャートが表示されるので、ここに私の試みがあります:
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>
どんな助けでも大歓迎です！