[英]show two different stacked column data in one chart canvasjs react
I want two stacked column data in one chart using canvasjs like this:我想使用 canvasjs 在一个图表中显示两个堆积的列数据,如下所示:
I have currently done something like this with the options: this achieves removing x axis and secondary y axis and showing two data together我目前使用选项做了类似的事情:这实现了删除 x 轴和辅助 y 轴并将两个数据一起显示
{
animationEnabled: true,
options:{
scales: {
xAxes: [{ stacked:true}]
}
},
axisY: {
titleFontColor: "#4F81BC",
lineColor: "#4F81BC",
labelFontColor: "#4F81BC",
tickColor: "#4F81BC",
margin:24,
},
axisY2: {
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
margin:24,
labelFormatter: function(){
return " ";
}
},
axisX:{
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
margin:24,
labelFormatter: function(){
return " ";
}
},
toolTip: {
shared: true
},
legend: {
cursor:"pointer",
},
data: [{
type: "stackedColumn",
name: "Proven Oil Reserves (bn)",
legendText: "Proven Oil Reserves",
showInLegend: false,
dataPoints:[
{ y: 30.25 },
]
},
{
type: "stackedColumn",
name: "Oil Production (million/day)",
legendText: "Oil Production",
showInLegend: false,
dataPoints:[
{ y: 17.46 },
]
},
{
type: "stackedColumn",
name: "Oil Production (million/day)",
legendText: "Oil Production",
axisYType:"secondary",
margin:10,
showInLegend: false,
dataPoints:[
{ y: 10.46 },
]
},
{
type: "stackedColumn",
name: "Oil Production (million/day)",
legendText: "Oil Production",
axisYType:"secondary",
margin:10,
showInLegend: false,
dataPoints:[
{ y: 10.46 },
]
}
]
}
it produces the result like:它产生如下结果:
what I need is to我需要的是
give margin between two datasets
在两个数据集之间留出余量
There will be gap between datapoints when the x-values are different.当x 值不同时,数据点之间会有差距。
able to label datasets with text over them as seen in the image above
能够用文本标记数据集,如上图所示
You can useindexlabels .您可以使用indexlabels 。 Please refer CanvasJS Docs for more info / examples.
请参阅CanvasJS 文档以获取更多信息/示例。 Below is an working example.
下面是一个工作示例。
var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, axisX:{ gridThickness: 0, tickLength: 0, lineThickness: 0, labelFormatter: function(){ return ""; } }, axisY: { includeZero: true, tickLength: 0, lineThickness: 0, gridColor: "#ddd", labelFormatter: function(e) { return ""; } }, toolTip: { shared: true }, data: [{ type: "stackedColumn", indexLabel: "RM xyz", indexLabelFontColor: "#fff", dataPoints: [ { x: 1, y: 47, color: "#c63531" }, { x: 2, y: 32, color: "#449fc7" } ] }, { type: "stackedColumn", indexLabel: "RM xyz", indexLabelFontColor: "#fff", dataPoints:[ { x: 1, y: 32, color: "#bb8786" }, { x: 2, y: 27, color: "#74ab3e" } ] }] }); chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <div id="chartContainer" style="height: 300px; width: 100%;"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.