Chart.js 수학 함수 그리기

Question

플로우 차트 (다이어그램)를 만들 수있는 응용 프로그램을 만들고 있습니다. 그럼 내가이 알고리즘을 분석하고 오전와 함께 차트를 ​​만들고 있는데 x 축은 입력의 수/크기이고 y 축은 프로그램이 취한 단계의 수입니다. 나는 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이라는 새 속성을 추가해야합니다.

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 
    }] 
} 

지금 당신은 당신이 new Chart() 전화 전에 플러그인 다음 (이 차트을 만들 수) 추가해야합니다 그렇지 않으면이되지 않습니다 :이 값은 하나 개의 인자를 가진 기능과 반환 값이어야합니다 차트의 플러그인 서비스에 추가되었습니다.

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); 
      } 
     } 
    } 
}); 

이제 원하는 옵션으로 차트를 자유롭게 만들 수 있습니다.