Блог

Я создаю приложение, в котором вы можете создать блок-схему (диаграмму). затем я анализирую этот алгоритм и создаю диаграмму, Chart.js где ось x — это количество входных данных / размер входных данных, а ось y — количество шагов, выполненных программой. Мне нужно нарисовать следующие математические функции в Chart.js :

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

Таковы сложности алгоритмов, которые мне нужно нарисовать… Я использую typescript , кстати. Возможно ли это?

Используя Chart.js плагины могут помочь вам сделать это довольно легко. Плагин позволяет обрабатывать некоторые события, вызванные созданием диаграммы, такие как инициализация, изменение размера и т. Д.

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

Я добавлю плагин, который может быть полезен для вашей проблемы, но сначала позвольте мне объяснить, как это работает.

Во-первых, вам нужно будет добавить новый атрибут к вашим наборам данных named 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);
            }
        }
    }
});
 

Теперь вы можете свободно создавать свою диаграмму с нужными вам параметрами.

Следует результат полностью рабочего примера, который вы можете найти в этом jsFiddle :