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>

Ответы на вопрос(0)

Ваш ответ на вопрос