Dygraph.js用户交互模型演示

Dygraph是基于Canvas的一款高性能图表插件，使用excanvas来支持IE，适合高密度数据（大数据、实时流计算）展示。鼠标横向选中可以放大X轴粒度，竖向选中可以放大Y轴粒度。你也可以禁用用户交互以及自定义交互。

图表,dygraphs

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

第三方库
作品简介 3597
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {
     var lastClickedGraph;
     Dygraph.addEvent(document, "mousewheel", function() {
         lastClickedGraph = null;
     });
     Dygraph.addEvent(document, "click", function() {
         lastClickedGraph = null;
     });
     new Dygraph(document.getElementById("div_g"),
         NoisyData, {
             errorBars: true
         });
     new Dygraph(document.getElementById("div_g2"),
         NoisyData, {
             errorBars: true,
             interactionModel: {}
         });
     var g3 = new Dygraph(document.getElementById("div_g3"),
         NoisyData, {
             errorBars: true,
             interactionModel: {
                 'mousedown': downV3,
                 'mousemove': moveV3,
                 'mouseup': upV3,
                 'click': clickV3,
                 'dblclick': dblClickV3,
                 'mousewheel': scrollV3
             }
         });
     document.getElementById("restore3").onclick = function() {
         restorePositioning(g3);
     };
     new Dygraph(document.getElementById("div_g4"),
         NoisyData, {
             errorBars: true,
             drawPoints: true,
             interactionModel: {
                 'mousedown': downV4,
                 'mousemove': moveV4,
                 'mouseup': upV4,
                 'dblclick': dblClickV4
             },
             underlayCallback: captureCanvas
         });
 });

编译

CSS

HTML

<h3>Default interaction model</h3>
<div style="width:600px;">
    <p style="text-align:center;">
        Zoom: click-drag, Pan: shift-click-drag, Restore: double-click
    </p>
    <div id="div_g" style="width:600px; height:300px;"></div>
</div>

<h3>Empty interaction model</h3>
<div style="width:600px;">
    <p style="text-align:center;">
        Click and drag all you like, it won't do anything!
    </p>
    <div id="div_g2" style="width:600px; height:300px;"></div>
</div>
<div id="g2_console"></div>

<h3>Custom interaction model</h3>
<div style="width:600px;">
    <p style="text-align:center;">
        Zoom in: double-click, scroll wheel
        <br> Zoom out: ctrl-double-click, scroll wheel
        <br> Standard Zoom: shift-click-drag Standard Pan: click-drag
        <br> Restore zoom level: press button
        <br>
    </p>
    <button id="restore3">Restore position</button>
    <div id="div_g3" style="width:600px; height:300px;"></div>
</div>
<h3>Fun model!</h3>
<div style="width:600px;">
    <p style="text-align:center;">
        Keep the mouse button pressed, and hover over all points to mark them.
    </p>
    <div id="div_g4" style="width:600px; height:300px;"></div>
</div>
<script src="/uploads/160301/dygraph_data.js"></script>
<script src="https://dygraphs.com/gallery/interaction-api.js"></script>
<script src="https://dygraphs.com/dygraph-combined.js"></script>

Dygraph是基于Canvas的一款高性能图表插件，使用excanvas来支持IE，适合高密度数据（大数据、实时流计算）展示。鼠标横向选中可以放大X轴粒度，竖向选中可以放大Y轴粒度。你也可以禁用用户交互以及自定义交互。

图表,dygraphs

编辑器支持Emmet

快捷键

Dygraph是基于Canvas的一款高性能图表插件，使用excanvas来支持IE，适合高密度数据（大数据、实时流计算）展示。 鼠标横向选中可以放大X轴粒度，竖向选中可以放大Y轴粒度。你也可以禁用用户交互以及自定义交互。

图表,dygraphs

使用Dygraph.js实现可交互手绘的图表

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Dygraph是基于Canvas的一款高性能图表插件，使用excanvas来支持IE，适合高密度数据（大数据、实时流计算）展示。鼠标横向选中可以放大X轴粒度，竖向选中可以放大Y轴粒度。你也可以禁用用户交互以及自定义交互。