Question

我正在使用Chart.js中的双轴图表，使用条形图上覆盖的折线图，我找到了此question的工作代码，图表效果很好，但我可以＆＃ 39; t显示y轴标签或图表标题。

在我开始使用叠加图表之前，我使用的是普通的双轴图表，我在标题和标签中添加的方式效果很好，所以我对如何获得标题感到有些困惑和标签显示在我当前的图表上。

这是我目前的代码：

$scope.drawChart = function(data_1, data_2, labels) {
    var overlayData = {
      labels: labels,
      title: {
        display: true,
        text: 'Chart Title'
      },
      datasets: [{
        label: "Revenue Potential Per Available Rental",
        type: "bar",
        scaleLabel: {
          display: true,
          labelString: "Revenue Potential Per Available Rental"
        },
        yAxesGroup: "1",
        fillColor: "rgba(56, 132, 199,0.5)",
        strokeColor: "rgba(56, 132, 199,0.8)",
        highlightFill: "rgba(56, 132, 199,0.75)",
        highlightStroke: "rgba(56, 132, 199,1)",
        data: data_1
      }, {
        label: "Average Monthly Listings",
        type: "line",
        scaleLabel: {
          display: true,
          labelString: "Average Monthly Listings"
        },
        yAxesGroup: "2",
        fillColor: "rgba(89, 89, 89,0.5)",
        strokeColor: "rgba(89, 89, 89,0.8)",
        highlightFill: "rgba(89, 89, 89,0.75)",
        highlightStroke: "rgba(89, 89, 89,1)",
        data: data_2
      }],
      yAxes: [{
        name: "1",
        scalePositionLeft: false,
        scaleFontColor: "rgba(56, 132, 199,0.5,0.8)"
      }, {
          name: "2",
          scalePositionLeft: true,
          scaleFontColor: "rgba(89, 89, 89,0.8)"
      }]
    };

    var myOverlayChart = new Chart(document.getElementById("chart").getContext("2d")).Overlay(overlayData,
    {
        populateSparseData: true,
        overlayBars: false,
        datasetFill: true,
        responsive: true
    });
  }

我之前用于在标签中添加的代码段是：数据集：[{ scaleLabel：{ 显示：true， labelString：＆＃34;平均每月列表＆＃34; }， ....}]

我获得冠军的方式是：

title: {
    display: true,
    text: 'Chart Title'
}

这是我为它制作的小提琴：https://jsfiddle.net/catiecook/6vgtakz2/

使用Chart.js将标题添加到双轴线和条形图

0 个答案: