如何使工具提示(ChartJS)与附近的容器重叠?

时间:2019-10-06 07:30:45

标签: javascript html css chart.js

我已经设置了折线图,现在想修改工具提示。现在,我被困于使工具提示覆盖附近的html容器,如下所示。

我已经尝试过更改html容器的Z-Index和工具提示选项fullWidth: true,都没有成功。

任何想法可能出在哪里?

注意:出于多种原因,我不想增加画布高度。

enter image description here

HTML(如果需要)

      <div class="thirdRow">
        <div class="LatestResults">
          <p>Latest Results:</p>
        </div>
        <div class="latestResultsWrapper">
        <canvas width="1500" height="30" id="lineChartResults"></canvas>
        </div>
      </div>

画布JS:

var ctx3 = $("#lineChartResults");
var data = {
  labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17",
           "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34" ,
           "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46"], //create n label per datapackage
  datasets: [{
    data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], // Specify the data values array
    borderColor: '#2E1A6D',
    fill: 'none',
    borderWidth: 2,
    pointBackgroundColor: '#2E1A6D',
    pointRadius: 6,
    showLine: false,
    pointHoverRadius: 9.5,
    pointHoverBackgroundColor: '#2487BC',
    pointHoverBorderColor: '#2487BC',
  }]
};

var options = {
  scaleShowGridLines: false,
  tooltips: {
    backgroundColor: '#5F5F5F',
    fullWidth: true,



  },
  layout: {
    padding: {
      left: 10,
      right: 10,
      bottom: 4,
    }
  },
  legend: {
    display: false
  },
  tooltip: {
    display: false
  },
  scales: {
    xAxes: [{
      display: false,
      ticks: {
          min: -1,
          max: 48,
          stepSize: 1,
      }
    }],
    yAxes: [{
      display: false,
      ticks: {
          min: 0,
          max: 2,
          stepSize: 1,
      }
    }],
}
};

var lineChartResults = new Chart(ctx3, {
  type: 'line',
  data: data,
  options: options
});

0 个答案:

没有答案
相关问题