0
jqueryとjavascriptに基づいて多くのプラグインが見つかりましたが、これらのプラグインはテーブルからチャートを生成しますが、すべてのテーブル値はハードコードされています。しかし、私のテーブル値はユーザーからの入力であり、私はその場でチャートを生成する必要があります。どのように私はこれを行うことができます任意のアイデア？htmlテーブルの入力データからグラフを作成しますか？
現在、私はcanvasjsを使用しています。
<!DOCTYPE HTML>
<html>
<head>
<title>My Chart</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js" integrity="sha256-VAvG3sHdS5LqTT+5A/aeq/bZGa/Uj04xKxY8KM/w9EE=" crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery.canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function hello() {
//Better to construct options first and then pass it as a parameter
var options = {
title: {
text: "My Chart"
},
animationEnabled: true,
data: [
{
type: "column", //change it to line, area, bar, pie, etc
dataPoints: [
{ x:25, y: 10 },
{ x: 20, y: 11 },
{ x: 30, y: 14 },
{ x: 40, y: 16 },
{ x: 50, y: 19 },
{ x: 60, y: 15 },
{ x: 70, y: 12 },
{ x: 80, y: 10 }
]
}
]
};
$("#chartContainer").CanvasJSChart(options);
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
は、それから入力から変数の値を取得するdocument.getElementById()を使用しhello()関数内の変数に代入しようとしました。しかし、それはエラーを出している。
HELP !! :-)
は
これをコードに追加しました。 ' –
'var test = document.getElementById（" inputValue "）。value;' –
と 'x：test'これは、次のようになります：' input type = "number" id = "inputValue" value = 20 onclick = "hello（）ロジックに従って動作する必要があります。しかし、テキストフィールドをクリックすると 'hello（）'関数は呼び出されません。グラフを生成しますが、 'test'に割り当てられたフィールドは考慮しません。 –