我正在使用此主题Chart.js how to get Combined Bar and line charts?中的Quince的Chart.js版本。条形图和线图看起来非常好。无论如何，轴必须分为Y1和Y2，我找不到Quince的版本支持。
我再次搜索并找到了这个主题How to add second Y-axis for Bar and Line chart in Chart.js?，它建议使用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>
答案 0 :(得分：9)
我终于将我的多轴功能端口推到了这个分叉上的master。作为对正在发生的事情的一个非常简要的概述，我已经在比例中添加了一组轴。每个轴都能够根据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的整体属性设置为false，否则会有点搞砸。此外，每个轴都有自己的0基线，因此两侧不会对齐。这是因为我决定你有两个轴的原因是因为它们显示不同的比例所以对于所有要坐的很好0需要在每个轴的不同位置。
我已经完成并测试了它的回归aginst我添加的其他功能，它似乎很好玩，但如果你使用它并注意到任何东西，奇怪，让我知道。
此外，我还没有能够将它写为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>
答案 1 :(得分：0)
我收到此错误代码
PieChart.html:79 Uncaught TypeError: (intermediate value).Overlay 不是函数 在 window.onload (PieChart.html:79)