我对 flot 很陌生，我的老板让我创建一个从 html 表到柱形图的图表。现在我不太有信心将我的数据库中的数据提取为 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>
欢迎任何和所有帮助！