Question

我对flot非常陌生，我的老板要我从html表创建一个图表到柱形图。现在我不太自信将数据从我的数据库拉到flot的格式化版本，但是可以很容易地将它拉成html表格式，所以我尝试在一小组数据样本上做这个但是没有成功。这就是我到目前为止所拥有的

现在示例数据如下： 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>

欢迎任何人提供帮助！

Answer 1

bar:选项实际应该是bars:，虽然这可能不是唯一的问题，否则它仍应显示行。

Answer 2

看起来graphTable不喜欢行标题中的名称，它想要数字。将此行添加到graphTable选项将使其成为图表：

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

此外，您需要将DNS bar更正为bars。

Flot和GraphTable - 表格中的图表

2 个答案: