chartjs : 꺾은 선형 차트의 기본값을 설정하십시오.

Question

기본 분으로 그리는 꺾은 선형 차트가 있습니다. 단추 클릭시 차트의 최소값을 변경 한 다음 업데이트합니다. 문제는 버튼 클릭을 토글하고 싶습니다. 버튼 클릭시 분을 설정 한 것처럼 말입니다. 다시 클릭하면 정상 분으로 다시 변경됩니다. 그러나 기본 경우에는 분당 전혀 없었습니다.

내가

$('#action').off().on('click', function() { 
    myLineChart.options.scales.yAxes[0].ticks.min = -50; 
    myLineChart.update(); 
}) 

처럼이 설정하고이 내 Jsfiddle

Answer 1

var data = { 
 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
    datasets: [{ 
 
    label: "My First dataset", 
 
    backgroundColor: "rgba(255,99,132,0.2)", 
 
    borderColor: "rgba(255,99,132,1)", 
 
    borderWidth: 2, 
 
    hoverBackgroundColor: "rgba(255,99,132,0.4)", 
 
    hoverBorderColor: "rgba(255,99,132,1)", 
 
    data: [65, 59, 20, 81, 56, 55, 40], 
 
    }] 
 
}; 
 
var option = { 
 
    legend: false, 
 
    title: { 
 
    display: true, 
 
    } 
 
}; 
 

 
var myLineChart = Chart.Line('myChart', { 
 
    data: data, 
 
    options: option 
 
}); 
 

 
$('#action').off().on('click', function() { 
 
     myLineChart.options.scales.yAxes[0].ticks.min = -50; 
 
     myLineChart.update(); 
 

 
     $("#action2").show(); 
 
     $("#action").hide(); 
 
    }) 
 
$('#action2').off().on('click', function() { 
 
    myLineChart.options.scales.yAxes[0].ticks.min = 0; 
 
    myLineChart.update(); 
 

 
    $("#action").show(); 
 
    $("#action2").hide(); 
 
})

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> 
 

 

 
<canvas id="myChart" width="400" height="200"></canvas> 
 
<button id="action" style="display: block;">action</button> 
 
<button id="action2" style="display: none;">action</button>

당신은 다른 버튼을 추가하여 작업을 분할 할 수 있습니다.

동일한 이름으로 HTML에 버튼을 하나 더 추가하고 아무 것도 표시하지 마십시오.

<button id="action" style="display: block;">action</button> 
<button id="action2" style="display: none;">action</button> 

은 '0 = 숨길 수있는 한 더 많은 기능

$('#action').off().on('click', function() { 
     myLineChart.options.scales.yAxes[0].ticks.min = -50; 
     myLineChart.update(); 

     $("#action2").show(); 
     $("#action").hide(); 
    }) 
$('#action2').off().on('click', function() { 
    myLineChart.options.scales.yAxes[0].ticks.min = 0; 
    myLineChart.update(); 

    $("#action").show(); 
    $("#action2").hide(); 
}) 

의 OnClick/쇼 (토글) 실제로 내가 전환 원하는 다른 것은 내가`분에 시작하려는 해달라고입니다