0
227
Viewsmostrar dos datos de columnas apiladas diferentes en un gráfico canvasjs reacciona
Quiero dos datos de columnas apiladas en un gráfico usando canvasjs como este: 
Actualmente he hecho algo como esto con las opciones: esto logra eliminar el eje x y el eje y secundario y mostrar dos datos juntos
{ 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 }, ] } ] } produce el resultado como: 
lo que necesito es
- dar margen entre dos conjuntos de datos
- capaz de etiquetar conjuntos de datos con texto sobre ellos como se ve en la imagen de arriba
·
Juan Pablo Isaza
1 answers
Answer question0
dar margen entre dos conjuntos de datos
Habrá una brecha entre los puntos de datos cuando los valores de x sean diferentes.
capaz de etiquetar conjuntos de datos con texto sobre ellos como se ve en la imagen de arriba
Puede utilizaretiquetas de índice . Consulte CanvasJS Docs para obtener más información/ejemplos. A continuación se muestra un ejemplo de trabajo.
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>
·
Juan Pablo Isaza
Report
Answer question