Chart.js 在条形图和折线图上具有双轴

我正在使用本主题中的 Quince 的 Chart.js 版本Chart.js如何获得组合条形图和折线图？。条形图和折线图看起来非常漂亮。无论如何，轴必须分为 Y1 和 Y2，我找不到 Quince 的版本支持。

我又搜索了一下，发现了这个主题如何在 Chart.js 中为条形图和折线图添加第二个 Y 轴？建议使用 Khertan 的 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>

我终于将我的多轴功能端口推到了这个前叉上的主机上。作为对正在发生的事情的极其简短的概述，我在比例中添加了一组轴。每个轴都能够计算一个值相对于其自身比例的 y 位置。开发人员现在唯一需要做的就是说明每个数据集需要属于哪个轴组。每个轴还可以被告知它应该是什么颜色以及它应该出现在图表的哪一侧。

如何使用它 - 在每个数据集中声明一个名为的新属性yAxesGroup

 datasets: [{
         label: "My First dataset",
         type: "bar",
         yAxesGroup: "1", //any with same group will appear in the same axis, also this can be anything as long as you always refer to it with the same name
         fillColor: "rgba(151,137,200,0.5)",
         strokeColor: "rgba(151,137,200,0.8)",
         highlightFill: "rgba(151,137,200,0.75)",
         highlightStroke: "rgba(151,137,200,1)",
         data: [28, 48, 40, 19, 86, 27, 90]
     },

然后为该轴提供更多选项，向名为的数据添加一个额外的属性yAxis这是轴选项的数组。默认情况下，每个轴都会在左侧显示一个比例，并以默认颜色或您设置为整体字体颜色的颜色显示，但您可以在此处覆盖它们

 var overlayData = {
     labels: ["January", "Februarya", "March", "April", "May", "Jun", "July"],
     datasets: [{
         label: "My First dataset",
         type: "bar",
         yAxesGroup: "1",
         fillColor: "rgba(151,137,200,0.5)",
         strokeColor: "rgba(151,137,200,0.8)",
         highlightFill: "rgba(151,137,200,0.75)",
         highlightStroke: "rgba(151,137,200,1)",
         data: [28, 48, 40, 19, 86, 27, 90]
     }, {
         label: "My Second dataset",
         type: "line",
         yAxesGroup: "2",
         fillColor: "rgba(151,187,205,0.5)",
         strokeColor: "rgba(151,187,205,0.8)",
         highlightFill: "rgba(151,187,205,0.75)",
         highlightStroke: "rgba(151,187,205,1)",
         data: [8, 38, 30, 29, 46, 67, 80]
     }],
     yAxes: [{
         name: "1",
         scalePositionLeft: false,
         scaleFontColor: "rgba(151,137,200,0.8)"
     }, {
         name: "2",
         scalePositionLeft: true,
         scaleFontColor: "rgba(151,187,205,0.8)"
     }]
 };

现在该图表将有 2 个轴，一个在左侧，一个在右侧。

有几点需要注意，如果任何值低于 0，则需要设置scaleBeginAtZero to false否则会有点混乱。此外，每个轴都有自己的 0 基线，因此 2 条边不会对齐。这正如我所预期的那样，因为我认为你有两个轴的原因是因为它们显示不同的比例，所以为了让所有东西都很好地坐在 0 上，每个轴需要处于不同的位置。

我已经对它进行了测试，以针对我添加的其他功能进行回归，这一切似乎都运行良好，但如果您确实使用它并注意到任何奇怪的事情，请告诉我。

另外，我无法将其编写为 ChartJS 的插件，因为核心中涉及的内容太多，因此它没有意义，因为您可以从 fork 构建版本，而不仅仅是覆盖 ChartJS 的原始版本。

总的来说，这就是它会产生的效果

 var overlayData = {
     labels: ["January", "Februarya", "March", "April", "May", "Jun", "July"],
     datasets: [{
         label: "My First dataset",
         type: "bar",
         yAxesGroup: "1",
         fillColor: "rgba(151,137,200,0.5)",
         strokeColor: "rgba(151,137,200,0.8)",
         highlightFill: "rgba(151,137,200,0.75)",
         highlightStroke: "rgba(151,137,200,1)",
         data: [28, 48, 40, 19, 86, 27, 90]
     }, {
         label: "My Second dataset",
         type: "line",
         yAxesGroup: "2",
         fillColor: "rgba(151,187,205,0.5)",
         strokeColor: "rgba(151,187,205,0.8)",
         highlightFill: "rgba(151,187,205,0.75)",
         highlightStroke: "rgba(151,187,205,1)",
         data: [8, 38, 30, 29, 46, 67, 80]
     }],
     yAxes: [{
         name: "1",
         scalePositionLeft: false,
         scaleFontColor: "rgba(151,137,200,0.8)"
     }, {
         name: "2",
         scalePositionLeft: true,
         scaleFontColor: "rgba(151,187,205,0.8)"
     }]
 };

 window.onload = function () {
     window.myOverlayChart = new Chart(document.getElementById("canvas").getContext("2d")).Overlay(overlayData, {
         populateSparseData: true,
         overlayBars: false,
         datasetFill: true,
     });
 }

<script src="https://raw.githack.com/leighquince/Chart.js/master/Chart.js"></script>

<canvas id="canvas" height="300" width="300"></canvas>