Chart.js具有双轴上的条形和线形图 [英] Chart.js with dual axis on bar and line graph
问题描述
我从这个主题使用Quince的Chart.js版本 Chart.js如何获取组合栏和折线图？。酒吧和线图看起来很不错。无论如何，轴必须分成Y1和Y2，我找不到Quince的版本支持。
I am using Quince's Chart.js version from this topic Chart.js how to get Combined Bar and line charts?. Bar and Line graph look very nice. Anyway, axis has to be separated into Y1 and Y2 which i cannot find that Quince's version support.
我再次搜索，发现这个主题如何为条形和线条添加第二个Y轴Chart.js中的图表？，它推荐使用Khertan的Chart.js它可以处理双轴，但我找不到方式结合条和线在一个情节。
I did search again and found this topic How to add second Y-axis for Bar and Line chart in Chart.js? which recommended to use Khertan's Chart.js which it can handle dual axis but i cannot find the way to combine bar and line within one plot.
我试图输入这个选项到Quince的版本，但它不工作。
I tried to input this option into Quince's version but it did not work.
scaleUse2Y: true,
我有办法吗？非常感谢您的帮助。
Is there any way i can do this? Thank you for your kindly help.
<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位置的位置。开发人员现在需要做的唯一事情是，每个数据集需要属于哪个轴组。
I have finally pushed my port of multi axis feature to the master on this fork. As an extremely brief overview of what is happening i have added a collection of axes into the scale. Each axis is able to calculate where a value should be position in terms of y against it's own scale. The only thing that developers need to now do is say which axes group each dataset needs to belong. Each axis can also be told what colour it should be and what side of the graph it should appear on.
如何使用它 - 在每个数据集中声明一个新的属性 yAxesGroup
How to use it - within each of your datasets declare a new property called 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 这是轴选项的数组。默认情况下，每个轴都会在左侧显示比例，并以默认颜色显示，或者您已设置为整体字体颜色，但这里是您可以覆盖它们的位置。
to then give more options to this axis add an extra property to the data called yAxis which is an array of axis options. By default each axis will show a scale on the left and in whatever colour is default or you have set as the overall font colour but here is where you can override them
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)"
}]
};
现在这个图表将有两个轴，一个在左边，一个在右边。
now this chart will have 2 axis, one on the left and one on the right.
需要注意的是，如果任何值低于0，您需要设置 scaleBeginAtZero 到 false 否则会弄乱了。此外，每个轴都有它自己的0基线，所以2边不会排队。这是我打算，因为我决定你有两个轴的原因是因为他们显示不同的尺度，所以一切都坐在很好0需要在不同的位置为每个轴。
A few things to note, if any values are going to be below 0 you need to set the overall attribute of scaleBeginAtZero to false otherwise it gets a bit messed up. Also each axis will have it's own 0 base line so the 2 sides will not line up. this is as intended as i decided the reason you have two axis is because they are showing different scales so for everything to be sit in nicely 0 needs to at a different position for each axis.
我已经通过并测试了它的回归aginst其他功能，我已经添加，它似乎都很好地玩，但如果你使用这个和注意到任何东西，奇怪，让我知道。
I have gone through and tested it for regression aginst other features i have added and it all seems to play nicely but if you do use this and notice anything, odd, let me know.
此外，我还没有能够写这个插件为chartjs，因为这么多被触动在核心，它没有意义，因为这样你会从fork的内置版本，而不是只是覆盖原始
Also i have not been able to write this as plugin for chartjs as so much is touched in the core that it does not make sense as such you would the built version from the fork and not just override an original version of chartjs.
总的来说，这是它产生的效果。
Overall this is the effect it will produce
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>
这篇关于Chart.js具有双轴上的条形和线形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
