Chart.js数学関数を描く

Question

私は、フローチャート（図表）を作成できるアプリケーションを作成しています。私はこのアルゴリズムを分析しており、x軸は入力の数/入力のサイズであり、y軸はプログラムのステップの数であるChart.jsのグラフを作成しています。私はChart.jsに、次の数学関数を描画する必要があります。

f(x) = x, f(x) = x^2, f(x) = x*log(x). 

ものは、私が描くのに必要なアルゴリズムの複雑です...私は道でtypescriptを使用しています。出来ますか？

Answer 1

Chart.js pluginsを使用すると、非常に簡単に行うことができます。プラグインは、私はあなたの問題のために有用である可能性プラグインを追加しますが、最初に私が説明させます

Chart.pluginService.register({ 
    beforeInit: function(chart) { 
     // All the code added here will be executed before the chart initialization 
    } 
}); 

---

など、このような初期化とチャートの作成を通じてサイズ変更をトリガあなたには、いくつかのイベントを処理することができます使い方。

最初に、functionという名前のデータセットに新しい属性を追加する必要があります。今、あなたはあなたが（あなたのチャートを作成するために、）new Chart()を呼び出す前に、次のプラグインを追加する必要が

var data = { 
    labels: [1, 2, 3, 4, 5], 
    datasets: [{ 
     label: "f(x) = x", // Name it as you want 
     function: function(x) { return x }, 
     data: [], // Don't forget to add an empty data array, or else it will break 
     borderColor: "rgba(75, 192, 192, 1)", 
     fill: false 
    }, 
    { 
     label: "f(x) = x²", 
     function: function(x) { return x*x }, 
     data: [], 
     borderColor: "rgba(153, 102, 255, 1)", 
     fill: false 
    }] 
} 

またはそうでなければなりません。その値は、一つの引数と返された値を持つ関数でなければなりませんチャートのプラグインサービスに追加されました：

Chart.pluginService.register({ 
    beforeInit: function(chart) { 
     // We get the chart data 
     var data = chart.config.data; 

     // For every dataset ... 
     for (var i = 0; i < data.datasets.length; i++) { 

      // For every label ... 
      for (var j = 0; j < data.labels.length; j++) { 

       // We get the dataset's function and calculate the value 
       var fct = data.datasets[i].function, 
        x = data.labels[j], 
        y = fct(x); 
       // Then we add the value to the dataset data 
       data.datasets[i].data.push(y); 
      } 
     } 
    } 
}); 

必要なオプションでチャートを自由に作成できるようになりました。

---

あなたがon this jsFiddleを見つけることができる完全実施例の結果に従う：