/ / HTMLテーブルから折れ線グラフを作成する方法-jquery、html、charts、linechart

HTMLテーブルから折れ線グラフを作成するには? - jquery、html、charts、linechart

私はこのチャートの概念と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>

率直に言うと、作成方法がわからないので...助けてください。ありがとうございます。

回答:

回答№1は1

Googleには、使いやすい洗練されたCharts APIがあります。から Googleドキュメント

<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以下では動作しない可能性があります。これは、コンテナが idcurve-chart 実際のチャートをレンダリングします。