charts - porcentajes - Crear un gráfico de área 100% apilada para un sitio web

grafico de barras con porcentajes

Question

Estoy tratando de agregar un gráfico a mi sitio web que muestra cómo se divide el ingreso obtenido entre dos partes. Esencialmente, el gráfico 100% apilado en Excel se vería como:

¿Hay algún producto bueno (idealmente económico, ya que el único que he encontrado que podría hacerlo es Highcharts, que se ve genial pero no es barato para lo que estamos haciendo) herramienta que podríamos incorporar a nuestro sitio web? Lo ideal sería que el usuario pudiera seleccionar un precio determinado y que muestre el porcentaje que se muestra a continuación para los dos, pero eso es simplemente agradable de tener. ¿Alguna sugerencia? Miré Google Charts pero no encontré uno que pudiera mostrar los datos en este formato.

Answer 1

Puedes hacer esto con Google Charts.

Suponiendo que tiene un grupo de números que no necesariamente coinciden con la misma escala, puede simplemente crear una función simple para comparar cada fila de números y ajustarla según la relación entre ellos:

function drawVisualization() {
  // add data in number form
  var data = google.visualization.arrayToDataTable([
    [''X'', ''Andrew'', ''Peter''],
    [100, 100, 100],
    [200, 35, 65],
    [400, 64, 144],
    [1000, 30, 70],
    [3000, 400, 1600],
  ]);

  // adjust data

  for(var i = 0; i < data.getNumberOfRows(); i++){
    var valA = data.getValue(i, 1);
    var valB = data.getValue(i, 2);
    var valTotal = valA + valB;
    data.setValue(i, 1, valA/valTotal);
    data.setValue(i, 2, valB/valTotal);
  };

  // Create and draw the visualization.
  var ac = new google.visualization.AreaChart(document.getElementById(''visualization''));
  ac.draw(data, {
    isStacked: true,
    vAxis: {format: "0%",},
    width: 600,
    height: 400,
  });
}

Así es como termina pareciendo (realmente simplifiqué tus datos, por lo que la línea no se suaviza; lamentablemente, los diagramas de área actualmente no permiten suavizar la línea a lo largo de las líneas de la opción curveType para Line Charts):

Answer 2

Puede usar el stacking: ''percent'' opción stacking: ''percent'' .

http://jsfiddle.net/Tdk62/

http://api.highcharts.com/highcharts#plotOptions.area.stacking