如何从 HTML Table 创建折线图？

Question

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

<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 有一个易于使用的漂亮图表 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 Table 创建折线图？

How To Create A Line Chart From HTML Table?

html

jquery

charts

linechart