在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还很陌生，不过我正在学习 :)。

- PerryDaPlatypus

---

嘿@PerryDaPlatypus，你在使用charts.js方面有限制吗？还是你的要求是使用JS图表库？否则，你可以查看http://www.fusioncharts.com/charts/combination-charts-single-y/或http://www.fusioncharts.com/charts/combination-charts-dual-y。很抱歉，我不太熟悉charts.js的工作方式，无法为你提供太多帮助。 - Ayan

谢谢你的回复，Ayan。我没有使用它的要求，只是有完整的示例（HTML、JS等），所以这是最容易开始的地方。我会查看上面的FusionChart链接，看看它是否对我有意义。我的JS不太好，所以现在基本上是我可以修改的完整示例。 - PerryDaPlatypus

酷！请查看这个详尽列表的组合图表 fiddles，你可以玩弄它们来看看是否符合你的要求。只需打开其中任何一个 fiddle 并开始检查即可。链接- http://www.fusioncharts.com/javascript-chart-fiddles/?fusioncharts-xt&type=combination-charts - Ayan

看起来很不错！两个网站的费用大约为199美元。我很想使用开放库使其工作，但我可能无法做到... - PerryDaPlatypus

我猜非商业用途是免费的。我之前在一些开源非商业项目中也使用过它。虽然如果你要将其用于商业用途，你可能需要重新考虑你的想法。这个库的好处是它的属性列表。只需简单地切换值，您就可以获得所需的视觉效果，而不需要对JS有深入的专业知识。祝你好运！ :D - Ayan

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 ...
      }); 

您可以从我的工作示例 这里 获得一些灵感。

- Tim Hallyburton

---

非常感谢。 - PerryDaPlatypus