플로트 막대 차트에서 축소를 중지하는 방법은 무엇입니까?

Question

Flot을 사용하여 일부 막 대형 차트를 그립니다. 사용자가 줌아웃 할 때 차트가 맨 아래에있는 것처럼 보이고 맨 아래에있는 것처럼 보이지 않도록 줌을 구성하려면 어떻게합니까? 즉, 차트의 모든 데이터가 표시 될 때 사용자가 계속 확대 축소하는 것을 원하지 않습니다. 또한 차트에서 X 축 아래에 0을 표시하지 못하도록 제한하려고합니다. 아래 차트 내 코드와 사진 참조 :

<#macro barChart2 var formatFunction ticks="" optionLegend="{ show: false }"> 
    var options = { 
    yaxis: { 
     tickFormatter: ${formatFunction} 
    }, 
    series: { 
     stack: 0, 
     bars: { 
     show: true, 
     barWidth: 0.9, 
     align: "center" 
     } 
    }, 
    grid : { 
     hoverable: true 
    }, 
    xaxis: { 
     <#if "${ticks}" != ""> 
     ticks: ${ticks} 
     </#if> 
     mode: "time", 
     timeformat: "%b %d, %H:%M %P" 
    }, 
    pan : { 
     interactive: true 
    }, 
    legend: ${optionLegend} 
    }; 

    var plot${var} = $.plot($("#chart${var}"), data, options); 

    $("#zoomIn${var}").click(function(e) { 
    e.preventDefault(); 
    plot${var}.zoom(); 
    }); 

    $("#zoomOut${var}").click(function(e) { 
    e.preventDefault(); 
    plot${var}.zoomOut(); 
    }); 
</#macro> 

Answer 1

을 나는 당신이 탐색 플러그인을 설정할 수 있습니다 zoomRange and panRange parameters를 살펴 보시기 바랍니다. 당신은 축의 사람들이 좋아하는 지정

zoomRange이 확대에 대한 제한을 설정

xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] }, 
yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] } 

. 이 경우 min과 max의 차이는 0.1 이하가되지 않으며 절대 10을 초과하지 않습니다. panRange은 콘텐츠가 특정 범위에 머물도록 지시하므로이 경우 축이 -10 이하 또는 10 이상으로 이동하지 않습니다

나는 시계열 데이터로 어떻게하는지 모르겠다.하지만 자바 스크립트 타임 스탬프로 시작하자.