JS图表（Charts）插件性能测试

canvasjs是基于canvas的js图表插件，其速度要远快于（10倍+）其他插件。大数据的可视化可以使用canvasjs。

js，图表

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3249
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/* JS图表（Charts）插件性能测试 
CanvasJS vs HighCharts vs AmCharts vs ChartJS
*/

//1. canvasjs
var data = window.getCanvasjsData();

var chartCanvas = new CanvasJS.Chart("canvasjs-chart", {
    interactivityEnabled: false,
    data: [{
        type: "line",
        name: "Cherno More",
        color: "#F08080",
        dataPoints: data[0]
    }, {
        type: "line",
        name: "Botev Plovdiv",
        color: "#20B2AA",
        dataPoints: data[1]
    }, {
        type: "line",
        name: "The Draw",
        color: "#423543",
        dataPoints: data[2]
    }]
});

chartCanvas.render();

// 2.highcharts
if (window.hgtChrt) window.hgtChrt.destroy();
window.hgtChrt = new Highcharts.Chart({
    credits: {
        enabled: false
    },
    tooltip: {
        enabled: false
    },
    chart: {
        renderTo: 'highcharts-container',
        type: 'line'
    },
    plotOptions: {
        line: {
            allowPointSelect: false,
            animation: false,
            boostThreshold: 500,
            dataLabels: {
                enabled: false
            },
            enableMouseTracking: false,
            events: []
        }
    },
    series: window.getHighChartsData()
});

// 3. chartjs
Chart.defaults.global.animation = false;
Chart.defaults.global.showTooltips = false;
Chart.defaults.global.tooltipEvents = [];
Chart.defaults.global.bezierCurve = false;
Chart.defaults.global.bezierCurveTension = 0;
Chart.defaults.global.pointDot = false;
Chart.defaults.global.pointDotRadius = 0;
Chart.defaults.global.datasetFill = false;
Chart.defaults.global.datasetStrokeWidth = 1;
Chart.defaults.global.events = [];
var chartJScanvas = new Chart(document.getElementById("chartjs-canvas").getContext("2d")).Line(window.getChartJsData(), {
    animation: false,
    onAnimationComplete: function() {},
    pointDot: false,
    bezierCurve: false,
    datasetFill: false,
    datasetStroke: true,
    datasetStrokeWidth: 1
});

// 4. amcharts
if (window.amChart) window.amChart.clear();

// SERIAL CHART
window.amChart = new AmCharts.AmSerialChart();
window.amChart.dataProvider = window.getAmData();
window.amChart.categoryField = "date";
window.amChart.balloon.color = "#000000";

// AXES
// category
var categoryAxis = window.amChart.categoryAxis;
categoryAxis.fillAlpha = 1;
categoryAxis.fillColor = "#FAFAFA";
categoryAxis.gridAlpha = 0;
categoryAxis.axisAlpha = 0;
categoryAxis.gridPosition = "start";
categoryAxis.position = "top";

// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.title = "Average Prices";
valueAxis.dashLength = 5;
valueAxis.axisAlpha = 0;
valueAxis.minimum = 1;
valueAxis.maximum = 6;
valueAxis.gridCount = 10;
window.amChart.addValueAxis(valueAxis);

// GRAPHS
// Italy graph                                                                  
var graph = new AmCharts.AmGraph();
graph.title = "Cherno More";
graph.valueField = "Cherno More";
window.amChart.addGraph(graph);

// Germany graph
var graph = new AmCharts.AmGraph();
graph.title = "Botev Plovdiv";
graph.valueField = "Botev Plovdiv";
window.amChart.addGraph(graph);

// United Kingdom graph
var graph = new AmCharts.AmGraph();
graph.title = "The Draw";
graph.valueField = "The Draw";
window.amChart.addGraph(graph);

// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chartCursor.zoomable = false;
chartCursor.cursorAlpha = 0;
window.amChart.addChartCursor(chartCursor);

// LEGEND
var legend = new AmCharts.AmLegend();
legend.useGraphSettings = true;
window.amChart.addLegend(legend);

// WRITE
var wrapper = document.getElementById("amcharts-container");
window.amChart.write(wrapper);

编译

CSS

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>

<script type="text/javascript" src="https://www.chartjs.org/assets/Chart.js"></script>
<div id="chartjs-container" style="min-width: 900px; height: 500px; margin: 0 auto">
    <canvas id="chartjs-canvas" height="500px" width="900px"></canvas>
</div>

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="amcharts-container" style="width: 900px; height: 500px;"></div>

return [datasets['one'], datasets['one'], datasets['one']];
    };

window.getChartJsData = function() {
        var labelset = [];
        var datasets = {
            'one': [],
            'two': [],
            'three': []
        };
        for (var i = 0; i < 1000; i++) {
            labelset.push("");
            datasets['one'].push(window.generateRandomY());
            datasets['two'].push(window.generateRandomY());
            datasets['three'].push(window.generateRandomY());
        }

return {
            labels: labelset,
            datasets: [{
                fillColor: "rgba(220,220,220,0.5)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                data: datasets['one']
            }, {
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                data: datasets['two']
            }, {
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(0,187,205,1)",
                pointColor: "rgba(0,187,205,1)",
                pointStrokeColor: "#fff",
                data: datasets['three']
            }]
        };
    };

window.getFlotData = function() {
        var datasets = [
            [],
            [],
            []
        ];
        for (var i = 0; i < 1000; i++) {
            datasets[0].push([i, window.generateRandomY()]);
            datasets[1].push([i, window.generateRandomY()]);
            datasets[2].push([i, window.generateRandomY()]);
        }

return datasets;
    };
</script>

canvasjs是基于canvas的js图表插件，其速度要远快于（10倍+）其他插件。大数据的可视化可以使用canvasjs。

js，图表

编辑器支持Emmet

快捷键

canvasjs是基于canvas的js图表插件，其速度要远快于（10倍+）其他插件。 大数据的可视化可以使用canvasjs。

js，图表

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

canvasjs是基于canvas的js图表插件，其速度要远快于（10倍+）其他插件。大数据的可视化可以使用canvasjs。