Chartjs 2 - 在同一圖表上具有相同y軸的堆疊酒吧和拆散線

我已經開始使用chart.js的v2的最新測試版了，因爲我需要繪製包含堆疊條形圖和拆散線的圖表圖表在同一張圖表上。這裏是什麼，我需要一個例子：Chartjs 2 - 在同一圖表上具有相同y軸的堆疊酒吧和拆散線

在該圖中的線條不層積並且都顯示其自然價值，但條形圖堆疊，並顯示總和值（包括一些負面值）。

我已經設法將兩個圖表放在一起，但到目前爲止，我只能成功地將兩個圖表堆疊在一起，或者我必須使用兩個單獨的y軸，它們以2個刻度結束。有單獨的y軸在該fiddle一個例子：

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

如果刪除了第一y軸然後我結束了與唯一的問題是，該線圖現在堆疊以及在單個尺度上。

有沒有什麼辦法像我需要使用chart.js一樣繪製圖表？

來源

2016-01-21 Roarster

您可以通過將不同的yAxisID（例如yAxisID: "bar-stacked"）設置爲每個數據集，然後再添加第二個options.scales.yAxes對象來獲得此功能。所以，你會擁有這是一個數據集：

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

，然後您將添加一個額外的yAxes（第一個會是你的線數據集[在下面的例子中，沒有yAxisId]的收集，第二個將全部你想堆疊的條帶）：

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' 
}]

完整的示例如下：

<!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>

來源

2016-06-09 13:22:08

有用的答案，但如果你不硬編碼的最小和最大滴答，那麼你的線和堆疊的酒吧將不會有0在圖表上的相同位置... –

Chartjs 2 - 在同一圖表上具有相同y軸的堆疊酒吧和拆散線

回答

相關問題