Question

我正在创建一个可以创建流程图（图表）的应用程序。然后我正在分析这个算法，我正在创建一个@Html.ActionLink("FOO", "Index", "Mil", new { year = 666, id = String.Empty }, null)的图表，其中x轴是输入的数量/输入的大小，y轴是程序所采取的步数。我需要在Chart.js：

中绘制以下数学函数

Chart.js

这些是我需要绘制的算法的复杂性......顺便说一句，我正在使用f(x) = x, f(x) = x^2, f(x) = x*log(x).。有可能吗？

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

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

<小时/> 按照完整工作示例的结果，您可以找到on this jsFiddle：

Chart.js绘制数学函数

1 个答案: