javascript - 如何使用浮点图在 Canvas 中的 X 轴或 Y 轴上添加滚动条

Question

我有一个多系列的浮图，绘制在宽度和高度的 Canvas 上。当浮点图有多个系列时，它会尝试在 Canvas 的高度和宽度内压缩，并且浮点图不会被清楚地看到。

为了获得所有节点可见的所有系列的清晰图表，我想引入滚动条，滚动条首先只适合几个系列，然后滚动系列的其余部分应该是见过。

我该怎么做？

Answer 1

如果您不想使用 panning and zooming插件(如@MF82 建议的那样)并想要一个真正的滚动条，只需将容器目标 div 包装在另一个 div 中:

<div 
  style="width:315px;height:300px;overflow-y:scroll">
    <div class="chart" id="placeholder1" style="width:300px;height:1000px;">
     </div>
</div>

fiddle 示例 here .

$(function () {
    
    var plot1 = $.plot($("#placeholder1"),[ 
        { data: [[0,0],[1,1],[2,2]], label: "Series A"}
    ], {
        series: {
            lines: { show: true },
            points: { show: true }
        },
        grid: { hoverable: true, clickable: true },
        xaxis: {
            ticks: [[0,"One"],[1,"Two"],[2,"Three"]]
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/javascript/jquery.flot.min.js"></script>
<div 
  style="width:315px;height:300px;overflow-y:scroll">
    <div class="chart" id="placeholder1" style="width:300px;height:1000px;">
     </div>
</div>