Chart.js绘制数学函数

Question

我正在创建一个应用程序,您可以在其中创建流程图(图表).然后我正在分析这个算法,我正在创建一个图表,Chart.js其中x轴是输入的数量/输入的大小,y轴是程序采取的步数.我需要在以下方面绘制以下数学函数Chart.js:

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

那些是我需要绘制的算法的复杂性......我正在使用typescript它.可能吗？

Answer 1

使用Chart.js插件可以帮助您轻松完成.插件允许您处理通过图表创建触发的一些事件,例如初始化,调整大小等.

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

您现在可以使用所需的选项自由创建图表.

跟随你可以在这个jsFiddle上找到的完整工作示例的结果: