带有 Chart.js 的组合条形折线图

Question

我的折线图根本没有显示在我的 chart.js 上。我在这里遗漏了哪一块拼图？

这里还有一个显示我的代码的小提琴，您可以看到条形图按预期显示，但折线图没有。 https://jsfiddle.net/c50dfw3g/1/

我以前从未使用过这种类型的图表，所以我不确定如何设置它。提前感谢所有提供帮助的人。

var ctx = document.getElementById('myChart');
var config = {
    type: 'bar',
  options: {
    legendCallback: function(chart) {
      var text = [];
      text.push('<ul class="' + chart.id + '-legend">');
      var data = chart.data;
      var datasets = data.datasets;
      if (datasets.length) {
        for (var i = 0; i < datasets.length; ++i) {
            text.push('<li>');
            if (datasets[i].type=='line') {
            text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
          } else {
            text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
          }
          text.push(datasets[i].label);
          text.push('</li>');
        }
      }
      text.push('</ul>');
      return text.join('');
    },
    legend: {
      display: false,
    },
    scales: {
      xAxes: [{
        type: "category",
        id: "axis-bar",
      }, {
        type: "time",
        id: "axis-time",
        display: false,
      }, ],
    },
  },
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [{
      label: "Dataset1",
      type: "line",
      backgroundColor: "#0000FF",
      borderColor: "#0000FF",
      borderWidth: 1,
      fill: false,
      xAxisID: "axis-time",
      data: [12296,12381,9141,24203,21987,21801,65394,91892,57645,44637,22631,17502]
    },{
      label: "Dataset2",
      type: "bar",
      backgroundColor: "#ff0000",
      borderColor: "#ff0000",
      borderWidth: 1,
      fill: true,
      xAxisID: "axis-bar",
      data: [299405,244029,247191,329711,273855,441914,426271,471912,374388,366864,326155,277442]
    }]
  },

};

var myChart = new Chart(ctx, config);
var legend = myChart.generateLegend();
document.getElementById("legend").innerHTML = legend;

Answer 1

尝试对两个数据集使用相同的 X 轴：

scales: {
  xAxes: [{
    type: "category",
    id: "axis-bar",
  }/* Commenting out the second axis, { 
    type: "time",
    id: "axis-time",
    display: true,
  }, */],
},

现在，我们将设置 line 数据集以使用此 X 轴：

datasets: [{
  label: "Dataset1",
  type: "line",
  backgroundColor: "#0000FF",
  borderColor: "#0000FF",
  borderWidth: 1,
  fill: false,
  xAxisID: "axis-bar",
  data: [12296,12381,9141,24203,21987,21801,65394,91892,57645,44637,22631,17502]
},

我们开始吧：

Answer 2

问题在于“xAxisID”属性。

您将 x 轴 id 指定为：'axis-bar'，但在指定数据集 1（'axis-time'）时使用不同的 id，因此它不会绘制在同一个图表上。

只需在数据集中使用您在定义图表比例时指定的相同 id，您将在同一个图表上获得两个图表，从而获得您想要的结果。