Chart.js с двойной осью на линейчатом графике
Я использую версию Quince Chart.js из этой темыChart.js, как получить Combined Bar и линейные графики?, Гистограмма и линейный график выглядят очень красиво. В любом случае, ось должна быть разделена на Y1 и Y2, которые я не могу найти, чтобы поддержать версию того Quince.
Я снова искал и нашел эту темуКак добавить вторую ось Y для линейчатого и линейного графика в Chart.js? который рекомендовал использовать Khertan's Chart.js, который может обрабатывать две оси, но я не могу найти способ объединить линию и линию в одном графике.
Я попытался ввести эту опцию в версию Quince, но она не сработала.
scaleUse2Y: true,
Есть ли способ, которым я могу сделать это? Спасибо за вашу любезную помощь.
<script>
Chart.defaults.global.templateInterpolators = {
start: "[[",
end: "]]"
};
Chart.defaults.global.scaleLabel = "[[= value ]]";
Chart.defaults.global.tooltipTemplate = "[[if (label){]][[= label ]]: [[}]][[= value ]]";
Chart.defaults.global.multiTooltipTemplate = "[[= value ]]";
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
color:"#F7464A",
//new option, barline will default to bar as that what is used to create the scale
type: "line",
fillColor: "rgba(220,220,220,0.2)", //White
strokeColor: "rgba(220,220,220,1)", //gray
pointColor: "rgba(220,220,220,1)", //gray
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 20, 43, 81, 56, 55, 40]
}, {
label: "My First dataset",
color:"#F7464A",
//new option, barline will default to bar as that what is used to create the scale
type: "bar",
fillColor: "rgba(255, 187, 0, 1)",
strokeColor: "rgba(255, 187, 0, 1)",
pointColor: "rgba(255, 187, 0, 1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [32, 25, 43, 22, 12, 92, 33]
}]
};
//canvases
var lineBar = document.getElementById("line-bar").getContext("2d");
//charts
var myLineBarChart = new Chart(lineBar).Overlay(data);
В этом HTML
<ul class="tabs"><li><input type="radio" name="tabs" id="tab1"checked />
<label for="tab1" onclick="rePlot(1,3)">2015</label>
<div id="tab-content1" class="tab-content" onclick="rePlot(1,3)">
<canvas group="canvas" id="line-bar" height="450" width="600" style="background-color:#8CDFD3;"></canvas>
</div>
</li>
<li><input type="radio" name="tabs" id="tab2" /><label for="tab2" onclick="rePlot(2,3)">2014</label>
<div id="tab-content2" class="tab-content" onclick="rePlot(2,3)">
<canvas group="canvas" id="line-bar" height="450" width="600" style="background-color:#8CDFD3;"></canvas>
</div>
</li>
<li><input type="radio" name="tabs" id="tab3" /><label for="tab3" onclick="rePlot(3,3)">2013</label>
<div id="tab-content3" class="tab-content" onclick="rePlot(3,3)">
<canvas group="canvas" id="line-bar" height="450" width="600" style="background-color:#8CDFD3;"></canvas>
</div>
</li>
</ul>