javascript - 在 Javascript 中组合条形图和折线图

Question

首先:请保持温柔，我是 JS 新手

我有一个仪表板，我正在使用 JS 创建图表。我正在使用一个已经有一些示例的模板，所以我通过遵循已经存在的内容来使事情正常进行。

我有一个条形图，但我想在它上面添加一个折线图。

这可能吗？如果是这样，怎么做到的？

我相信我正在使用 Chart.min.js(之前在文档中导入)

这是我生成图表的 js(减去数据)。

<script>
window.onload = function(){
    // Bar Chart from barChartData
    var ctx = document.getElementById("chart-bar").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
    responsive : true
    });
</script>

希望有人能帮我解决这个问题……我擅长 HTML、Python、Flask、MySql 等……但 js 仍然是全新的，但我正在学习 :-)。

Answer 1

是的，这是可能的。

Chart.js 可让您创建包含多个数据集的图表。数据集不必是同一类型，因此您可以创建一个包含线条的数据集和另一个包含条形的数据集，如下所示:

datasets: [{
        // set one for your bars
        type: 'bar',
        data: [1, 2, 3, ... ] // your data for the bar chart
      }, {
        // set two for your lines
        type: 'line',
        data: [4, 5, 6, ... ] // your data for the line chart
      }]

然后用这些数据集创建图表

window.myBar = new Chart(ctx, {
        type: 'bar',
        data: barChartData,
        responsive : true,
        // other settings ...
      }); 

您可以从我的工作示例中获得一些灵感 here