Chartjs 2 - Barra impilata e linea non allineata sullo stesso grafico con lo stesso asse Y

Ho iniziato a utilizzare l'ultima versione beta di v2 di chart.js poiché è necessario disegnare un grafico che contenga sia un grafico a barre in pila sia una linea non stackata grafico sullo stesso grafico. Ecco un esempio di ciò che serve:Chartjs 2 - Barra impilata e linea non allineata sullo stesso grafico con lo stesso asse Y

In questo grafico le linee non sono sovrapposte e degli mostrando loro valori naturali ma il grafico a barre è accatastato e mostra il totale complessivo dei valori (compresi alcuni negativo valori).

Sono riuscito a ottenere i due grafici disegnati insieme, ma finora sono riuscito solo ad avere entrambi i grafici impilati o ho dovuto usare due assi y separati che finiscono con 2 scale. C'è un esempio di y separato in questo fiddle:

yAxes: [{ 
    stacked: false, 
    ticks: { 
     beginAtZero: true 
    } 
    }, { 
    id: "bar-y-axis", 
    stacked: true, 
    ticks: { 
     beginAtZero: true 
    }, 
    type: 'linear' 
    }]

Se rimuove il primo asse y poi finito con una singola scala con l'unico problema è che il grafico linea è ora accatastato pure .

C'è un modo per disegnare un grafico come ho bisogno di utilizzare chart.js?

fonte

2016-01-21 Roarster

È possibile ottenere questa funzionalità con una combinazione di impostazione di un diverso (ad esempio yAxisID: "bar-stacked") in ciascuno dei set di dati, quindi aggiungere un secondo oggetto options.scales.yAxes. Così si avrebbe questo come un insieme di dati:

{ 
    label: 'Promoters', 
    backgroundColor: "#aad700", 
    yAxisID: "bar-stacked", 
    data: [ 
    50, 44, 52, 62, 48, 58, 59, 50, 51, 52, 53, 54 
    ] 
}

e poi si dovrebbe aggiungere un ulteriore yAxes (il primo sarà la raccolta dei vostri set di dati di linea [non yAxisId nell'esempio qui sotto], il secondo sarà tutto dei bar che si desidera impilate):

yAxes: [{ 
    stacked: false, 
    ticks: { 
    beginAtZero: true, 
    min: 0, 
    max: 100 
    } 
}, { 
    id: "bar-stacked", 
    stacked: true, 
    display: false, //optional if both yAxes use the same scale 
    ticks: { 
    beginAtZero: true, 
    min: 0, 
    max: 100 
    }, 
    type: 'linear' 
}]

esempio completa è la seguente:

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <title>Stacked Bar Chart</title> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script> 
 
    <style> 
 
    canvas { 
 
     -moz-user-select: none; 
 
     -webkit-user-select: none; 
 
     -ms-user-select: none; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div style="width: 100%"> 
 
    <canvas id="canvas"></canvas> 
 
    </div> 
 
    <script> 
 
    var barChartData = { 
 
     labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], 
 
     datasets: [{ 
 
     data: [ 
 
      50, 30, 60, 70, 80, 90, 95, 70, 90, 20, 60, 95 
 
     ], 
 
     type: 'line', 
 
     label: 'This Year', 
 
     fill: false, 
 
     backgroundColor: "#fff", 
 
     borderColor: "#70cbf4", 
 
     borderCapStyle: 'butt', 
 
     borderDash: [], 
 
     borderDashOffset: 0.0, 
 
     borderJoinStyle: 'miter', 
 
     lineTension: 0.3, 
 
     pointBackgroundColor: "#fff", 
 
     pointBorderColor: "#70cbf4", 
 
     pointBorderWidth: 1, 
 
     pointHoverRadius: 5, 
 
     pointHoverBackgroundColor: "#70cbf4", 
 
     pointHoverBorderColor: "#70cbf4", 
 
     pointHoverBorderWidth: 2, 
 
     pointRadius: 4, 
 
     pointHitRadius: 10 
 
     }, { 
 
     data: [ 
 
      25, 40, 30, 70, 60, 50, 40, 70, 40, 80, 30, 90 
 
     ], 
 
     type: 'line', 
 
     label: 'Last Year', 
 
     fill: false, 
 
     backgroundColor: "#fff", 
 
     borderColor: "#737373", 
 
     borderCapStyle: 'butt', 
 
     borderDash: [10, 10], 
 
     borderDashOffset: 0.0, 
 
     borderJoinStyle: 'miter', 
 
     lineTension: .3, 
 
     pointBackgroundColor: "#fff", 
 
     pointBorderColor: "#737373", 
 
     pointBorderWidth: 1, 
 
     pointHoverRadius: 5, 
 
     pointHoverBackgroundColor: "#737373", 
 
     pointHoverBorderColor: "#737373", 
 
     pointHoverBorderWidth: 2, 
 
     pointRadius: 4, 
 
     pointHitRadius: 10 
 
     }, { 
 
     label: 'Promoters', 
 
     backgroundColor: "#aad700", 
 
     yAxisID: "bar-y-axis", 
 
     data: [ 
 
      50, 44, 52, 62, 48, 58, 59, 50, 51, 52, 53, 54 
 
     ] 
 
     }, { 
 
     label: 'Passives', 
 
     backgroundColor: "#ffe100", 
 
     yAxisID: "bar-y-axis", 
 
     data: [ 
 
      20, 21, 24, 25, 26, 17, 28, 19, 20, 11, 22, 33 
 
     ] 
 
     }, { 
 
     label: 'Detractors', 
 
     backgroundColor: "#ef0000", 
 
     yAxisID: "bar-y-axis", 
 
     data: [ 
 
      30, 35, 24, 13, 26, 25, 13, 31, 29, 37, 25, 13 
 
     ] 
 
     }] 
 
    }; 
 

 
    window.onload = function() { 
 
     var ctx = document.getElementById("canvas").getContext("2d"); 
 
     window.myBar = new Chart(ctx, { 
 
     type: 'bar', 
 
     data: barChartData, 
 
     options: { 
 
      title: { 
 
      display: true, 
 
      text: "Chart.js Bar Chart - Stacked" 
 
      }, 
 
      tooltips: { 
 
      mode: 'label' 
 
      }, 
 
      responsive: true, 
 
      scales: { 
 
      xAxes: [{ 
 
       stacked: true, 
 
      }], 
 
      yAxes: [{ 
 
       stacked: false, 
 
       ticks: { 
 
       beginAtZero: true, 
 
       min: 0, 
 
       max: 100 
 
       } 
 
      }, { 
 
       id: "bar-y-axis", 
 
       stacked: true, 
 
       display: false, //optional 
 
       ticks: { 
 
       beginAtZero: true, 
 
       min: 0, 
 
       max: 100 
 
       }, 
 
       type: 'linear' 
 
      }] 
 
      } 
 
     } 
 
     }); 
 
    }; 
 
    </script> 
 
</body> 
 

 
</html>

fonte

2016-06-09 13:22:08

Risposta utile ma Se non si esegue l'hardcode dei tick minimi e massimi, la linea e la barra in pila non avranno 0 nello stesso punto del grafico ... –

Chartjs 2 - Barra impilata e linea non allineata sullo stesso grafico con lo stesso asse Y

risposta

Problemi correlati