(MVC) 这是一种按日期显示图表数据的有效方式吗？

Question

我只是想知道是否有人可以告诉我我是否在正确的轨道上。

我有一个数据库，其中包含由设备跟踪并按日期时间排序的温度值。我的目标是通过 ChartJS 创建报告图表（例如折线图）。现在问题是这个 table 包含数千行，我以前从未处理过这么多数据。

我正在考虑提示输入日期范围并使用日期查询 similar here。然后我会 return 它作为 JsonResult 并让 ChartJS 使用它。这够好了吗？

Answer 1

以下是我运行（也包含代码）在 IE11 上使用 1 个图表和 1 个数据集进行的一些简单测试的结果。您必须运行通过 调整每个可用的图表选项 来针对您正在使用的图表类型进行自己的测试（开始前请先阅读 :-)） .

返回数据的子集肯定会产生积极影响，但关于这是否明显以补偿妥协的问题是非常主观的，需要实际测量（如果合理）才能弄清楚。

当您考虑端到端性能时，除了在类似环境的生产环境中进行检测、车削和更多检测外别无选择，当然，微优化是万恶之源（以及许多错过的咖啡休息时间）。要考虑的其他因素的简短（但绝不完整）列表是序列化/反序列化性能、网络时间、服务器配置（压缩等）等。

下面的测试是针对桌面客户端的，也只是为了时间。如果移动设备是目标环境，您肯定希望运行对环境进行一些测试以查看内存/CPU 使用情况。

愚蠢的简单测试

var POINTS = 5000;
var ANIMATION = false;
var BEZIERCURVE = false;
var SCALEOVERRIDE = false;


var ITERATIONS = 10;

// date generation
var data = [];
var labels = [];
for (var i = 0; i < POINTS; i++) {
    labels.push("A")
    data.push(Math.random() * 100)
}

var chartData = {
    labels: labels,
    datasets: [
        {
            data: data
        }
    ]
};


// our charting function
function drawChart() {
    var chart;
    var startTime = (new Date()).getTime();
    chart = new Chart(document.getElementById("myChart").getContext("2d")).Line(chartData, {
        animation: ANIMATION,
        scaleOverride: SCALEOVERRIDE,
        scaleSteps: 10,
        scaleStepWidth: 10,
        scaleStartValue: 0,
        bezierCurve: BEZIERCURVE,
        onAnimationComplete: function () {
            output.push((new Date()).getTime() - startTime);
            if (chart !== undefined)
                chart.destroy();
            j++;
            if (j < ITERATIONS)
                setTimeout(drawChart, 0);
            else
                console.log(output);
        }
    });
}

var j = 0;
var output = [];
drawChart();

结果

与少许盐、酸橙和龙舌兰酒一起服用。时间以毫秒为单位，基于 10 次迭代。

----------------------------------------------------------------------------------------
| Type      |   Points  |  Animation | Bezier   | Scale Override | Mean     | Median   |
----------------------------------------------------------------------------------------
| Bar       |   10      |  N         | -        | N              | 2.7      | 3        |
| Bar       |   100     |  N         | -        | N              | 14       | 13.5     |
| Bar       |   1000    |  N         | -        | N              | 128.5    | 127.5    |
| Bar       |   5000    |  N         | -        | N              | 637.4    | 626.5    |
| Bar       |   10      |  Y         | -        | N              | 997.2    | 997      |
| Bar       |   100     |  Y         | -        | N              | 1003.5   | 1006.5   |
| Bar       |   1000    |  Y         | -        | N              | 3417.1   | 3418.5   |
| Bar       |   5000    |  Y         | -        | N              | 17086.6  | 17085    |
| Bar       |   10      |  N         | -        | Y              | 3.2      | 3        |
| Bar       |   100     |  N         | -        | Y              | 14.5     | 14.5     |
| Bar       |   1000    |  N         | -        | Y              | 127.2    | 125.5    |
| Bar       |   5000    |  N         | -        | Y              | 638      | 632.5    |
| Bar       |   10      |  Y         | -        | Y              | 996.6    | 997      |
| Bar       |   100     |  Y         | -        | Y              | 999.4    | 999      |
| Bar       |   1000    |  Y         | -        | Y              | 3441.9   | 3433.5   |
| Bar       |   5000    |  Y         | -        | Y              | 16985.6  | 16959.5  |
| Line      |   10      |  N         | Y        | Y              | 3.6      | 4        |
| Line      |   100     |  N         | Y        | Y              | 16.4     | 16       |
| Line      |   1000    |  N         | Y        | Y              | 146.7    | 145.5    |
| Line      |   5000    |  N         | Y        | Y              | 821.5    | 820.5    |
| Line      |   10      |  N         | N        | Y              | 2.9      | 3        |
| Line      |   100     |  N         | N        | Y              | 14.3     | 14       |
| Line      |   1000    |  N         | N        | Y              | 131      | 127      |
| Line      |   5000    |  N         | N        | Y              | 643.9    | 635.5    |
| Line      |   10      |  N         | N        | N              | 3.1      | 3        |
| Line      |   100     |  N         | N        | N              | 15.6     | 15       |
| Line      |   1000    |  N         | N        | N              | 131.9    | 133.5    |
| Line      |   5000    |  N         | N        | N              | 666      | 660      |

正如预期的那样，比例覆盖有影响（但只有一点点），关闭贝塞尔曲线有明显的影响，使用条形图与折线图之间没有太大区别（至少对于我的配置运行).随着点数的增加，动画会产生明显的影响（但我认为更简单的缓动函数会更快）

(MVC) 这是一种按日期显示图表数据的有效方式吗？

(MVC) Is this an efficient way of displaying chart data by date?

model-view-controller

json

chart.js