0
185
ViewsGráfico de pila superpuesto en Canvas JS
tengo un código que debería darme un gráfico de barras superpuesto, uno dentro de otro en canvas js, algo así como debajo de Output Needed
Por lo tanto, debe ser una combinación de un gráfico horizontal apilado y un gráfico superpuesto dentro del primero (como en la imagen)
pero obtengo todo dentro de un gráfico principal
a continuación se muestra el código.
var chart = new CanvasJS.Chart("chartContainer", { theme: "light2", title: { text: "Chart Title" }, reversed:true, data: [ { type: "error", whiskerThickness: 0, color: "#004ca0", dataPoints: [ { label: "Alpha", y: [0 , 71] }, ] }, { type: "column", axisXType: "secondary", color: "#34dc00", dataPoints: [ { label: "Alpha", y: 60 }, ] }, { type: "column", axisXType: "secondary", color: "#3cfa00", dataPoints: [ { label: "Alpha", y: 50 }, ] }, ] }); chart.render(); chart.data[0].set("stemThickness", chart.get("dataPointWidth") * 4 + 10); <div id="chartContainer" style="height: 360px; width: 100%;"></div>Gracias
·
Juan Pablo Isaza
2 answers
Answer question0
En el código que ha compartido, está utilizando un gráfico de columnas, mientras que en la captura de pantalla compartida necesita un gráfico de barras apiladas. Usando la barra apilada / la barra apilada 100% y el gráfico deerrores , puede lograr lo que se muestra en la captura de pantalla compartida. A continuación se muestra el código de trabajo.
var chart = new CanvasJS.Chart("chartContainer", { dataPointWidth: 70, axisX: { lineThickness: 0, tickLength: 0, labelFormatter: function(e) { return ""; } }, axisY: { includeZero: true, lineThickness: 0, gridThickness: 0, tickLength: 0, labelFormatter: function(e) { return ""; } }, toolTip: { shared: true }, data: [{ type: "stackedBar100", name: "Unique Opens: 33.3%", showInLegend: true, color: "#23a9e8", dataPoints: [ { x: 1, y: 33.3 } ] }, { type: "error", name: "Unique Clicks: 33.3%", showInLegend: true, legendMarkerType: "square", linkedDataSeriesIndex: 0, stemThickness: 25, whiskerThickness: 0, color: "#336a84", dataPoints: [ { x: 1, y: [0, 33.3] } ] }, { type: "stackedBar100", name: "Unique Opens: 66.7%", showInLegend: true, color: "#dfe3e4", dataPoints: [ { x: 1, y: 66.7 } ] }] }); chart.render(); <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <div id="chartContainer" style="height: 100px; width: 100%;"></div>
·
Juan Pablo Isaza
Report
0
var chart = new CanvasJS.Chart("chartContainer", { theme: "light2", title: { text: "Chart Title" }, reversed:true, data: [ {type: "error", axisXType: "secondary", color: "#34dc00", dataPoints: [{ label: "Alpha", y: [ 0, 100 ] }, ]}, {type: "column", axisXType: "secondary", color: "#004ca0", dataPoints: [{ label: "Alpha", y: 71 }, ] }, {type: "column", axisXType: "secondary", color: "#ff0000", dataPoints: [{ label: "Alpha", y: 50 }, ] } ] }); chart.render(); chart.data[0].set("stemThickness", chart.get("dataPointWidth") * 4 + 10); <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <div id="chartContainer" style="height: 360px; width: 100%;"></div> 
·
Juan Pablo Isaza
Report
Answer question