Как выделить и увеличить размер выделенной области графика с использованием Chart.js
Есть код: смотрите вложение.
Работает зум, можно даже его подвигать - но почему-то только вправо. Как сделать так, чтобы можно было выделить мышью часть кривой графика и чтобы только эта часть кривой осталась на графике, ну и её можно было бы увеличить?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.6.6/chartjs-plugin-zoom.min.js"></script>
<title></title>
<style type="text/css">
table.iksweb {
width: 20%;
border-collapse: collapse;
border-spacing: 0;
height: auto;
}
table.iksweb, table.iksweb td, table.iksweb th {
border: 1px solid #595959;
}
table.iksweb td, table.iksweb th {
padding: 3px;
width: 30px;
height: 35px;
}
table.iksweb th {
background: #347c99;
color: #fff;
font-weight: normal;
word-break: break-all; /* Перенос слов */
}
body {
font-family: Calibri;
font-size: 12pt;
}
span {
font-family: 'Arial CYR';
-aw-import: ignore;
font-style: italic;
}
p, td {
margin: 0pt;
widows: 0;
orphans: 0;
font-size: 10pt;
font-family: 'Arial CYR';
font-style: normal;
}
table {
margin-top: 0pt;
margin-bottom: 0pt;
}
.inOneLine {
max-width: 90%;
height: auto;
overflow: hidden
}
.lineElementLeft {
float: left;
width: 23%
}
.lineElementRight {
float: left;
width: 50%
}
</style>
</head>
<body>
<div id="bod">
<div id="PlotSection">
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
<script>
var xValues =[1,2,3,4,5,6,7,8,9,10];
var yValues = [23,34,36,56,67,78,88,89,99,100];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
fill: false,
pointRadius: 0,
lineTension: 0,
backgroundColor: "rgba(200,100,55,1.0)",
borderColor: "rgba(0,200,155,1.0)",
data: yValues
}]
},
options: {
pan: {
enabled: true,
mode: 'xy',
threshold: 5,
},
zoom: {
enabled: true,
mode: 'xy'
},
legend: { display: false },
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Оптическая плотность (mAU)',
fontStyle: 'Arial',
fontSize: 12,
fontColor: '#000000',
},
ticks: { min: -60.0, max: 40.0, stepSize: 20},
gridLines: {
drawOnChartArea: false,
color: 'rgba(10,0,0,0.5)'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Время измерения (мин.)',
fontStyle: 'Arial',
fontSize: 12,
fontColor: '#000000',
},
ticks: { min: 0.0, max: 10.0, maxTicksLimit: 20},
gridLines: {
drawOnChartArea: false,
color: 'rgba(10,0,0,0.5)'
}
}]
}
}
});
</script>
</div>
<p><span> </span></p>
<div id="PeakTableSection">
<p>Таблица пиков</p>
<table class="iksweb">
<tbody>
<tr>
<td>Пик</td>
<td>
<p>Время</p>
<p>(мин)</p>
</td>
<td>Компонент</td>
<td>
<p>Конц.</p>
<p></p>
</td>
<td>Высота</td>
<td>Площадь</td>
<td>
<p>Полуширина</p>
</td>
<td>
<p>Асимметрия</p>
</td>
<td>
<p>Эффективность</p>
</td>
<td>
<p>Разрешение</p>
</td>
</tr>
<tr>
<td>1 </td>
<td>4.54</td>
<td>ретинол</td>
<td>3.440</td>
<td>35.199</td>
<td>476.097</td>
<td>11.893</td>
<td>1.53</td>
<td>2546.5</td>
<td></td>
</tr>
</tbody>
</table>
<p><span> </span></p>
<p><span> </span></p>
<p><span> </span></p>
</div>
<div id="ProgramTableSection">
<p>Программа измерений</p>
<table class="iksweb">
<tbody>
<tr>
<td> Этап </td>
<td> От </td>
<td> До </td>
<td> Компонент </td>
<td> λ погл. </td>
</tr>
<tr>
<td> 1 </td>
<td> 0.00 </td>
<td> 10.00 </td>
<td> ретинол </td>
<td> 254 </td>
</tr>
</tbody>
</table>
<p><span> </span></p>
<p><span> </span></p>
</div>
<div id="CalibrationTableSection">
<p>Таблица градуировки</p>
<table class="iksweb">
<tbody>
<tr>
<td> Номер </td>
<td> Компонент </td>
<td> Время </td>
<td> k1 </td>
<td> СКО </td>
<td> КК </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>