Question

首先：请温柔，我是JS的新手

我有一个仪表板，我正在用JS创建一个图表。我正在使用一个已经有一些示例的模板，所以我通过跟踪已经存在的东西来使事情有效。

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

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

我相信我正在使用Chart.min.js（先前在doc中导入）

这是我的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

中获取灵感

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

1 个答案: