Thanm.jsを含む動的チャートを作成してください -- javascript フィールド と jquery フィールド と html フィールド と charts フィールド 関連 問題

Create dynamic chart with chart.js












6
vote

問題

日本語

チャートを使用しています。jQueryプラグインは棒グラフを作成します。静的チャートを作成できますが、動的チャートを作成します。 HTMLテーブルから読み取られたデータからチャートを描きたいです。動的データセットをChart.js棒グラフに設定する方法

これは私のコードです。

<事前> <コード> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Bar Chart</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <script src="js/Chart.js"></script> </head> <body> <div style="width:50%;"> <canvas id="canvas_bar"></canvas> </div> <div class="dataset"> <table> <tr> <th>Year</th> <th>Income</th> <th>Expenditure</th> <th>Profit/Loss<th> </tr> <tr> <td>2012</td> <td>10000</td> <td>5000</td> <td>5000</td> </tr> <tr> <td>2013</td> <td>11500</td> <td>7500</td> <td>4000</td> </tr> <tr> <td>2014</td> <td>9800</td> <td>4700</td> <td>5100</td> </tr> <table> <div> <script> var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; var barChartData = { labels : ["2012","2013","2014"], datasets : [ { fillColor : "rgba(95,137,250,0.5)", strokeColor : "rgba(95,137,250,0.9)", highlightFill: "rgba(95,137,250,0.75)", highlightStroke: "rgba(95,137,250,1)", data : [10000,11500,9800] }, { fillColor : "rgba(245,75,75,0.5)", strokeColor : "rgba(245,75,75,0.8)", highlightFill : "rgba(245,75,75,0.75)", highlightStroke : "rgba(245,75,75,1)", data : [5000,7500,4700] }, { fillColor : "rgba(98,223,114,0.5)", strokeColor : "rgba(98,223,114,0.8)", highlightFill : "rgba(98,223,114,0.75)", highlightStroke : "rgba(98,223,114,1)", data : [5000,4000,5100] } ] }; window.onload = function(){ var ctx = document.getElementById("canvas_bar").getContext("2d"); window.myBar = new Chart(ctx).Bar(barChartData, { responsive : true }); } </script> </body> </html>
英語

I am using Chart.js jquery plugin to create bar chart . I can create static chart but i want to create a dynamic chart. I want to draw the chart from the data which read from a html table. How to set dynamic dataset to a chart.js bar chart.

This is my code.

<!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title>Bar Chart</title>     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">     <script src="js/Chart.js"></script> </head> <body>      <div style="width:50%;">         <canvas id="canvas_bar"></canvas>     </div>      <div class="dataset">         <table>             <tr>                 <th>Year</th>                 <th>Income</th>                 <th>Expenditure</th>                 <th>Profit/Loss<th>             </tr>             <tr>                 <td>2012</td>                 <td>10000</td>                 <td>5000</td>                 <td>5000</td>             </tr>             <tr>                 <td>2013</td>                 <td>11500</td>                 <td>7500</td>                 <td>4000</td>             </tr>             <tr>                 <td>2014</td>                 <td>9800</td>                 <td>4700</td>                 <td>5100</td>             </tr>         <table>     <div>    <script>         var randomScalingFactor = function(){ return Math.round(Math.random()*100)};          var barChartData = {             labels : ["2012","2013","2014"],             datasets : [                 {                     fillColor : "rgba(95,137,250,0.5)",                     strokeColor : "rgba(95,137,250,0.9)",                     highlightFill: "rgba(95,137,250,0.75)",                     highlightStroke: "rgba(95,137,250,1)",                     data : [10000,11500,9800]                 },                 {                     fillColor : "rgba(245,75,75,0.5)",                     strokeColor : "rgba(245,75,75,0.8)",                     highlightFill : "rgba(245,75,75,0.75)",                     highlightStroke : "rgba(245,75,75,1)",                     data : [5000,7500,4700]                 },                 {                     fillColor : "rgba(98,223,114,0.5)",                     strokeColor : "rgba(98,223,114,0.8)",                     highlightFill : "rgba(98,223,114,0.75)",                     highlightStroke : "rgba(98,223,114,1)",                     data : [5000,4000,5100]                 }             ]          };           window.onload = function(){             var ctx = document.getElementById("canvas_bar").getContext("2d");             window.myBar = new Chart(ctx).Bar(barChartData, {                 responsive : true             });         } </script> </body> </html> 
</div
           

回答リスト

7
 
vote
vote
ベストアンサー
 

Chart.jsの正しいデータ構造を作成することで、jQuery Text()関数を使用してテーブルから値を抽出できます.jsテーブルから動的にチャートデータを生成できます。

まずテーブルからラベルを抽出する必要があります。行を選択したり、各行を繰り返すことで、最初の列からラベルデータを取得できます。

<事前> <コード> function generateLabelsFromTable() { var labels = []; var rows = jQuery("tr"); rows.each(function(index){ if (index != 0) // we dont need first row of table { var cols = $(this).find("td"); labels.push(cols.first().text()); } }); return labels; }

同様に、テーブルHTMLを繰り返すことでチャートデータを生成できます。

<事前> <コード> function generateDataSetsFromTable() { var data; var datasets = []; var rows = jQuery("tr"); rows.each(function(index){ if (index != 0) // we dont need first row of table { var cols = $(this).find("td"); var data = []; cols.each(function(innerIndex){ if (innerIndex!=0) // we dont need first columns of the row data.push($(this).text()); }); var dataset = { fillColor : colors[index%3].fillColor, strokeColor : colors[index%3].strokeColor, highlightFill: colors[index%3].highlightFill, highlightStroke: colors[index%3].highlightStroke, data : data } datasets.push(dataset); } }); return datasets; }

この関数を書き込んだ後は、この

のようにBarchartDataを変更できます。 <事前> <コード> var barChartData = { labels : generateLabelsFromTable(), datasets : generateDataSetsFromTable() };

チャートの現在のスタイルを保持する目的でカラー配列を定義する必要があります。この配列は、チャートデータセットを割り当てるときに上記で使用されます。

<事前> <コード> # manual ip config.vm.network "public_network", auto_config: false config.vm.provision "shell", run: "always", inline: "ifconfig eth1 192.168.50.101 netmask 255.255.255.0 up" config.vm.provision "shell", run: "always", inline: "ifconfig eth1:1 192.168.50.102 netmask 255.255.255.0 up" config.vm.provision "shell", run: "always", inline: "ifconfig eth1:2 192.168.50.103 netmask 255.255.255.0 up" 0

jQueryを含めることを忘れないでください。

fiddle

 

you can extract values from table by using jquery text() function , by building correct data structure for chart.js you can generate chart data dynamically from table .

First of all you have to extract labels from table . you can select rows and by iterating each row you can get label data from first columns.

function generateLabelsFromTable() {                            var labels = [];      var rows = jQuery("tr");     rows.each(function(index){         if (index != 0)  // we dont need first row of table         {             var cols = $(this).find("td");                   labels.push(cols.first().text());                                    }     });     return labels; } 

Similarly you can generate chart data by iterating the table html .

function generateDataSetsFromTable() {     var data;     var datasets = [];     var rows = jQuery("tr");     rows.each(function(index){         if (index != 0) // we dont need first row of table         {             var cols = $(this).find("td");               var data = [];             cols.each(function(innerIndex){                 if (innerIndex!=0) // we dont need first columns of the row                                      data.push($(this).text());                                                       });               var dataset =              {                 fillColor : colors[index%3].fillColor,                 strokeColor : colors[index%3].strokeColor,                 highlightFill: colors[index%3].highlightFill,                 highlightStroke: colors[index%3].highlightStroke,                 data : data             }              datasets.push(dataset);          }     });     return datasets; } 

After writing this functions , you can modify your barChartData like this

var barChartData = {     labels : generateLabelsFromTable(),     datasets : generateDataSetsFromTable() };  

You also should define a color array into the begining to keep the current style of the chart . This array is used above when assigning chart dataset

var colors = []; colors.push(                         {         fillColor : "rgba(95,137,250,0.5)",         strokeColor : "rgba(95,137,250,0.9)",         highlightFill: "rgba(95,137,250,0.75)",         highlightStroke: "rgba(95,137,250,1)" }); colors.push(                         {         fillColor : "rgba(245,75,75,0.5)",         strokeColor : "rgba(245,75,75,0.8)",         highlightFill : "rgba(245,75,75,0.75)",         highlightStroke : "rgba(245,75,75,1)" }); colors.push(                         {         fillColor : "rgba(98,223,114,0.5)",         strokeColor : "rgba(98,223,114,0.8)",         highlightFill : "rgba(98,223,114,0.75)",         highlightStroke : "rgba(98,223,114,1)", }); 

Do not forget to include jquery .

FIDDLE

</div
 
 
   
   
2
 
vote

すべての回答このページについて言及することは、チャートを作成するためのメソッドが完全に異なる

がどのメソッドの存在下であるChall Praverバージョンのためのものです。

前のバージョン

<事前> <コード> # manual ip config.vm.network "public_network", auto_config: false config.vm.provision "shell", run: "always", inline: "ifconfig eth1 192.168.50.101 netmask 255.255.255.0 up" config.vm.provision "shell", run: "always", inline: "ifconfig eth1:1 192.168.50.102 netmask 255.255.255.0 up" config.vm.provision "shell", run: "always", inline: "ifconfig eth1:2 192.168.50.103 netmask 255.255.255.0 up" 1

新バージョン

<事前> <コード> # manual ip config.vm.network "public_network", auto_config: false config.vm.provision "shell", run: "always", inline: "ifconfig eth1 192.168.50.101 netmask 255.255.255.0 up" config.vm.provision "shell", run: "always", inline: "ifconfig eth1:1 192.168.50.102 netmask 255.255.255.0 up" config.vm.provision "shell", run: "always", inline: "ifconfig eth1:2 192.168.50.103 netmask 255.255.255.0 up" 2

新バージョンの動的チャートを作成したい場合は、必要なコンテナ内のCONVASを追加するだけで、Call Chartメソッドフルコードはこの

です。 <事前> <コード> # manual ip config.vm.network "public_network", auto_config: false config.vm.provision "shell", run: "always", inline: "ifconfig eth1 192.168.50.101 netmask 255.255.255.0 up" config.vm.provision "shell", run: "always", inline: "ifconfig eth1:1 192.168.50.102 netmask 255.255.255.0 up" config.vm.provision "shell", run: "always", inline: "ifconfig eth1:2 192.168.50.103 netmask 255.255.255.0 up" 3
 

All answers mention on this page is for ChartJs previous version in which method for creating chart is totally different

Previous version

new Chart(ctx).Bar(barChartData, {             responsive : true         }); 

New Version

new Chart(ctx,{                   type: 'doughnut'                  }); 

If you want to create Dynamic Chart for New Version then just append the convas in any container you want then call chart method Full code is this

  $('#pieChartContainer').html('');       $('<canvas id="pieChart"></canvas>').appendTo($("#pieChartContainer"));               data1={};               data1.labels=["M", "T", "W", "T", "F", "S", "S"];               data1.datasets=[                  {backgroundColor:["#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e"],data: [12, 19, 3, 17, 28, 24, 7]}               ];               var ctx = $("#pieChart").get(0).getContext("2d");                 var myChart = new Chart(ctx, {                   type: 'doughnut',                   data: data1                  }); 
</div
 
 

関連する質問

0  チャートJS統合  ( Chart js integration ) 
私は初めてChartJSを使っています。 ChartJS Module.but i'mから簡単な棒グラフをテストしようとしました 私のブラウザのチャートを見る。私が間違いをするかどうか私に知らせてください。 下記のHTMLソースを使用しているHTMLソースを...

0  Charts RecativeJSを使用してレンダリングのAPIからデータオブジェクトを表示するためのFor Loopを作成します。  ( Make a for loop to show data object from api in render using charts reactjs ) 
チャートのAPIからデータを表示する必要があります( HTTPS) ://canvasjs.com/react-charts/chart-index-data-label/ ) これは私のAPIの前部: <事前> <コード> //API Gains stat...

0  MSチャート制御 - ラインチャートタイプの「ゼロ」Y値列を表示する方法の最適化方法  ( Ms chart control optimize method for displaying zero y value columns for a l ) 
私は2010年と出荷するMicrosoft Chart Extensionsを使用しています。これは私のニーズに合っていますが、私は迷惑に遭遇し、よりエレガントな解決策を探しています。 折れ線グラフをチャートするときは、連続的な線を達成するために、すべてのX座...

1  動的グーグルチャート  ( Dynamic google charts ) 
well私はこのコードを手に入れました: <事前> <コード> NSLog(@"button pressed"); NSString* myurl=@"http://chart.apis.google.com/chart?chf=bg,s,67676...

4  QuantMod ChartSeriesライン色を緑から別の色に設定  ( Set quantmod chartseries line color from green to another color ) 
Version.String Rバージョン2.11.0(2010-04-22) QUATTMOD "0.3~17" > Windows XP <コード> quantmod の quantmod で 9988777661 で使用する場合、チャートに表示され...

1  積み上げシリーズでハイストックチャートを使用する  ( Using a highstock chart with stacked series ) 
現在このようなハイチェート積み上げ列チャートを持っています: > そして私はそれが醜く見えるだろうというチャートを置くためのデータを置くために多くのデータを持っていて、幅に合わないでしょう: 2つのスクリーンショットの各列に4色があることに注意し...

1  Flex Plot ChartingでRADIUSスタイルを使用する方法  ( How to use radius style in flex plot charting ) 
Flex Plot ChartでRADIUSプロパティを使用すると RADIUSが推奨されていない警告を引き起こし、RADIUSスタイルを使用してください この警告についてのオンライン文書はありません。 RADIUSスタイルをどのように使用できますか?ありが...

40  NET 3.5チャートの制御例外:Chartimg.axdの子要求の実行中  ( Net 3 5 chart controls exception error executing child request for chartimg ax ) 
誰でもこのエラーが発生していない新しいフリーチャートコントロールがDundasから購入されたMSを使用していますか? 「Chartimg.axdの子要求の実行中」 MSDNフォーラムでは、My Web.configが推奨されています。 MSDNフォーラム...

1  PRIMEFECACES:チャートと凡例の職位  ( Primefaces charts and legend position ) 
PrimeFecesを使ってかなり基本的な積み上げ棒グラフをまとめることに取り組んでいます。チャート自体はちょうど元気になるようです。ただし、凡例はチャートデータの上に配置されています。私はあなたが凡例を任意のコンパス序数(n、s、w、e、se、sw、ne、...

1  私はGoogleバーチャートに取り組んでいます、私は個々のバーに色を追加して立ち往生しています  ( I am working on google bar charts i am stuck with adding colours to individual ) 
<事前> <コード> <!DOCTYPE html> <html lang="en-US"> <body> <h1>My Web Page</h1> <div id="piechart"></div> <script type="text/javascr...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有