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

我在本主题中使用Quince的Chart.js版本。条形图和线形图看起来很漂亮。无论如何，axis必须分为Y1和Y2，我找不到Quince的版本支持

我再次搜索并找到了这个主题，它建议使用Khertan的Chart.js，它可以处理双轴，但我找不到在一个绘图中组合条形图和线条的方法

我试着把这个选项输入到昆斯的版本中，但没有成功

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);

Chart.defaults.global.templateInterpolators={
开始：“[[”，
结束：“]]”
};
Chart.defaults.global.scaleLabel=“[[=值]]”；
Chart.defaults.global.ToolTiptTemplate=“[[if（label）{]][[=label]]：[[[}]][[=value]]”；
Chart.defaults.global.MultiToolTiptTemplate=“[[=值]]”；
风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“我的第一个数据集”，
颜色：#F7464A“，
//新选项，barline将默认为bar，用于创建比例
键入：“行”，
fillColor:“rgba（220220,0.2）”，//白色
strokeColor:“rgba（220220,1）”，//灰色
点颜色：“rgba（220220,1）”，//灰色
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[65,20,43,81,56,55,40]
}, {
标签：“我的第一个数据集”，
颜色：#F7464A“，
//新选项，barline将默认为bar，用于创建比例
输入：“酒吧”，
fillColor:“rgba（255187,0,1）”，
strokeColor:“rgba（255187,0,1）”，
pointColor:“rgba（255187,0,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[32,25,43,22,12,92,33]
}]
};
//拉票
var lineBar=document.getElementById（“行栏”）.getContext（“2d”）；
//图表
var myLineBarChart=新图表（线条）。叠加（数据）；

在这个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>

2015

2014年

2013年

我终于把我的多轴端口功能推到了这个叉子上的主机上。作为对正在发生的事情的一个非常简短的概述，我在天平中添加了一组轴。每个轴都能够根据其自身的比例计算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)"
     }]
 };

现在这个图表有两个轴，一个在左边，一个在右边

需要注意的是，如果任何值都将低于0，则需要将

scaleBeginAtZero

的总体属性设置为

false

，否则会有点混乱。此外，每个轴都有自己的0基线，因此两侧不会对齐。这正如我所想的，你有两个轴的原因是因为它们显示不同的比例，所以所有的东西都很好地处于0，每个轴需要在不同的位置

我已经检查并测试了它的回归和我添加的其他功能，这一切似乎都玩得很好，但如果你使用这个，并注意到任何事情，奇怪的，让我知道

此外，我还无法将此作为chartjs的插件编写，因为它在核心中涉及太多内容，因此没有意义，因为您将从fork中创建构建版本，而不仅仅覆盖chartjs的原始版本

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

var overlydata={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“我的第一个数据集”，
输入：“酒吧”，
yAxesGroup:“1”，
fillColor:“rgba（151137200,0.5）”，
strokeColor:“rgba（151137200,0.8）”，
高光填充：“rgba（151137200,0.75）”，
强光笔划：“rgba（151137200,1）”，
数据：[28,48,40,19,86,27,90]
}, {
标签：“我的第二个数据集”，
键入：“行”，
yAxesGroup:“2”，
填充颜色：“rgba（151187205,0.5）”，
strokeColor：“rgba（151187205,0.8）”，
高光填充：“rgba（151187205,0.75）”，
强光笔划：“rgba（151187205,1）”，
数据：[8,38,30,29,46,67,80]
}],
雅克斯：[{
名称：“1”，
scalePositionLeft:false，
scaleFontColor:“rgba（151137200,0.8）”
}, {
名称：“2”，
scalePositionLeft:对，
scaleFontColor:“rgba（151187205,0.8）”
}]
};
window.onload=函数（）{
window.myOverlayChart=新图表（document.getElementById（“canvas”）.getContext（“2d”））.Overlay（overlayData{
populateSparseData:true，
覆盖条：false，
datasetFill:true，
});
}

我得到了这个错误代码

html:79未捕获类型错误：（中间值）。覆盖不是函数

---

在window.onload（PieChart.html:79）

尝试将Quince's与？谢谢Quince，你太棒了。：）有没有办法让天平在“刻度点”而不是中间？我用这个来画两个y轴的折线图，所以现在看起来很奇怪，因为这些线没有一直延伸到终点。如果你用折线图而不是叠加图（如果你只想要直线），那应该可以