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轴的堆叠酒吧和拆散线

回答

相关问题