ZingChart.js 大数据可视化图表插件使用示例

zingchart提供在Flash，HTML5 Canvas和SVG，VML上渲染交互式图表的能力，可以在主流浏览器和设备上跨平台工作。图表类型提供丰富的选择，如条形、线、面积、气泡、散射、饼图、雷达图等图表，以及一些独特的可视化效果，如弦图和帕累托图。从经纬度数据中得出的地理图。 API有150 +的方法和事件，使您可以完整的进行图表控制（缩放、工具提示、交互）。

大数据，图表

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// ZingChart.js 大数据可视化图表插件使用示例，本例数据量为100K，渲染时间为1s左右。
function test() {
    var chartdata = {
        backgroundColor: '#fff',
        '-plotarea': {
            margin: 'dynamic'
        },
        scaleY: {
            lineWidth: 0,
            guide: {
                lineStyle: 'solid'
            },
            tick: {
                visible: false
            },
            minValue: 'auto'
        },
        scaleX: {
            maxItems: 10,
            lineWidth: 0,
            short: true,
            tick: {
                lineColor: '#ccc',
                lineWidth: 1
            },
            guide: {
                visible: false
            },
            normalize: true,
            zooming: true
        },
        scrollX: {},
        plot: {
            mode: 'fast',
            exact: true
        },
        crosshairX: {},
        series: [{
            values: dataset['100k']
        }]
    };

chartdata['type'] = 'line';
    chartdata['series'][0]['line-width'] = 1;
    chartdata['series'][0]['shadow'] = false;

zingchart.DEV.SORTTOKENS = 0;
    zingchart.DEV.PLOTSTATS = 0;
    zingchart.DEV.DOMFRAGMENTS = 1;
    zingchart.DEV.RESOURCES = 0;
    zingchart.DEV.SAVESOURCE = 0;
    zingchart.TIMEOUT = 0;
    zingchart.FASTWIDTH = 1;
    input.timeBefore = new Date().getTime();
    zingchart.render({
        id: 'chartDiv',
        output: 'svg',
        hideprogresslogo: true,
        events: {
            load: function() {
                input.timeAfter = new Date().getTime();
                writeRenderTime(input.data, input.timeBefore, input.timeAfter);
            }
        },
        data: chartdata
    });
}

$(document).ready(function() {
    test();
});

编译

CSS

HTML

function writeRenderTime(data, tBefore, tAfter) {
        var libName;
        var dataSize = legibleDataSize(data);
        var totalTime = (tAfter - tBefore) / 1000;
        $("#timeToRender").html('ZingChart' + " rendered <strong>" + dataSize + " points</strong> in " + totalTime.toString() + "s");
    };
</script>
<script src="/uploads/160301/dataset_100k.js"></script>
<script src="/uploads/160301/zingchart.min.js"></script>
<div id='chartDiv'></div>
<p id="timeToRender">Run a speed test to see the results.</p>

大数据，图表

编辑器支持Emmet

快捷键

大数据，图表

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：