Question

我是这个图表概念和mvc的新手。我正在尝试在mvc中为表数据创建折线图。这是我正在使用的示例数据..

<div class="panel-body table-responsive">
        <table id="dtView" class="table table-striped table-bordered table-response">
            <thead>
                <tr>
                    <th class="text-center">Package Name</th>
                    <th class="text-center">Jan</th>
                    <th class="text-center">Feb</th>
                    <th class="text-center">Mar</th>
                    <th class="text-center">Apr</th>
                    <th class="text-center">May</th>
                    <th class="text-center">Jun</th>
                    <th class="text-center">Jul</th>
                    <th class="text-center">Aug</th>
                    <th class="text-center">Sep</th>
                    <th class="text-center">Oct</th>
                    <th class="text-center">Nov</th>
                    <th class="text-center">Dec</th>
                </tr>
            </thead>
            <tbody>

                <tr>
                    <td>Hyderabad</td>
                    <td>123151</td>
                    <td>234324</td>
                    <td>234234</td>
                    <td>12333</td>
                    <td>45644</td>
                    <td>2344</td>
                    <td>45666</td>
                    <td>2344</td>
                    <td>9877</td>
                    <td>3232444</td>
                    <td>344355</td>
                    <td>34555</td>
                    <td>345566</td>

                </tr>
                <tr>
                    <td>Bangalore</td>
                    <td>12321151</td>
                    <td>232214324</td>
                    <td>232334234</td>
                    <td>14342333</td>
                    <td>44555644</td>
                    <td>2334365644</td>
                    <td>45434666</td>
                    <td>2323344</td>
                    <td>98212177</td>
                    <td>32343532444</td>
                    <td>344545355</td>
                    <td>345323255</td>
                    <td>3455454566</td>

                </tr>
            </tbody>
        </table>
    </div>

坦率地说我不知道怎么创造......所以，请帮助我..谢谢..

Answer 1

Google有一个易于使用的光滑的Charts API。来自Google Documentation：

<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Hyderabad', 'Bangalore'],
      ['Jan',  123151, 12321151],
      ['Feb',  234324, 232214324],
      ['March',  234234, 232334234]
      //more data here
    ]);

    var options = {
      //different options available
      title: 'Company Performance',
      curveType: 'function',
      legend: { position: 'bottom' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);
  }
</script>

警告，一些图表可能无法在IE8及以下版本中使用。这假设您有一个id curve-chart的容器来呈现实际图表。

如何从HTML表创建折线图？

1 个答案: