꺾은 선형 차트는 차트에서 두 개 이상의 스케일 플로팅을 지원합니다. 이 기능은 한 데이터 시리즈에서 다른 데이터 시리즈로 매우 다양하고 축이있는 다른 모든 그래프에서 지원되는 그래프에서 값을 플로팅 할 때 매우 유용합니다. 주어진 예는 여러 Y 축을 사용하여 다른 스케일을 나타내는 라인 차트를 보여줍니다. 또한 브라우저에서 편집하거나 저장하여 로컬에서 실행할 수있는 소스 코드도 포함되어 있습니다.
canvasjs.com/javascript-charts/
Beautiful JavaScript Charts | 10x Fast | 30+ JS Chart Types
JavaScript Charts & Graphs with 10x performance. Our JavaScript Charting Library has simple API & 30+ JS Chart types. Supports Animation, Zooming & Panning
canvasjs.com
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/javascript-charts/line-chart-multiple-axis/" target="_blank" title="JavaScript Line Charts with Multiple Axes ">https://canvasjs.com/javascript-charts/line-chart-multiple-axis/</a></div>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
exportEnabled: true,
title:{
text: "Gold Medals Won in Olympics"
},
axisY:{
title: "Number of Medals"
},
toolTip: {
shared: true
},
legend:{
cursor:"pointer",
itemclick: toggleDataSeries
},
data: [{
type: "spline",
name: "최종",
showInLegend: true,
dataPoints: [
{ label: "seoul1" , y: 44 },
{ label:"seoul2", y: 37 },
{ label: "seoul3", y: 36 }
]
},
{
type: "spline",
name: "임시",
showInLegend: true,
dataPoints: [
{ label: "seoul1" , y: 16 },
{ label:"seoul2", y: 28 },
{ label: "seoul3", y: 32 }
]
}]
});
chart.render();
function toggleDataSeries(e) {
if(typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
chart.render();
}
}
해당 차트는 유료제품이며, 무료로 제공해 주는 대상은 스타트업 업체나 상용적으로 사용하지 않은 곳이나 학생들 이라고 합니다. ^^