如何在一个中显示两个不同的图表模式

Question

我正在创建图表，如下所示：

所以我可以单独显示图表，但我不能在同一图表线上显示两个图表。

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<body>

<canvas id="statisticChart" style="width:100%;max-width:600px"></canvas>

<script>
        var xValues = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        var yValues = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15, 12];

        new Chart("statisticChart", {
            type: "line",
            data: {
                labels: xValues,
                datasets: [{
                    fill: false,
                    lineTension: 0,
                    backgroundColor: "rgba(25,162,242,1)",
                    borderColor: "rgba(2, 92, 145, 1)",
                    data: yValues
                }]
            },
            options: {
                legend: { display: false },
                scales: {
                    yAxes: [{ ticks: { min: 6, max: 16 } }],
                }
            }
        });
        var barColors = ["#19A2F2"];

        Chart("statisticChart", {
            type: "bar",
            data: {
                labels: xValues,
                datasets: [{
                    backgroundColor: barColors,
                    data: yValues
                }]
            },
            options: {
                legend: { display: false },
                title: {
                    display: true,
                    text: "World Wine Production 2018"
                }
            }
        });
    </script>

</body>
</html>

所以你能看看吗？另外我也关心css，所以我想显示颜色为#19A2F2的第二个图表，在此先感谢。

Answer 1

Chart.js 支持混合图表——当然这涉及只使用一个图表实例。您需要做的就是获取两个单独图表的 datasets 对象并将它们放入分配给图表的数组中 data.datasets 属性.

例如：

var xValues = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var yValues = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15, 12];

new Chart("statisticChart", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
        type: "line",
        fill: false,
        lineTension: 0,
        backgroundColor: "rgba(25,162,242,1)",
        borderColor: "rgba(2, 92, 145, 1)",
        data: yValues,
        fill: false
      },
      {
        type: "bar",
        backgroundColor: "#19A2F2",
        data: yValues
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          min: 6,
          max: 16
        }
      }],
    },
    title: {
      display: true,
      text: "World Wine Production 2018"
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="statisticChart" style="width:100%;max-width:600px"></canvas>

如何在一个中显示两个不同的图表模式

How to display two different chart modal in one

html

css

canvas

charts