Как сделать горизонтальную прокрутку графика (при использовании Chart. js) - PullRequest
Новая
       7

Как сделать горизонтальную прокрутку графика (при использовании Chart. js)

1 голос
/ 21 марта 2020

Я проверил этот вопрос и этот вопрос и сделал прокрутку диаграммы способной горизонтально, но ее высота также увеличилась, и теперь она также способна прокручивать вертикально. Как я могу сделать диаграмму с возможностью горизонтальной прокрутки без ее вертикального расширения? 

HTML
<div class="chartWrapper">
 <div class="chartAreaWrapper">
    <div class="chartAreaWrapper2">
        <canvas id="canvas"></canvas>
    </div>
</div>
<canvas id="myChartAxis" height="300" width="0"></canvas>
</div>

JS
var ctx = document.getElementById('canvas').getContext('2d');
        window.myLine = new Chart(ctx, config);
        var sourceCanvas = myLiveChart.chart.canvas;
                    var copyWidth = myLiveChart.scales['y-axis-0'].width - 10;
                    var copyHeight = myLiveChart.scales['y-axis-0'].height + myLiveChart.scales['y-axis-0'].top + 10;
                    var targetCtx = document.getElementById("myChartAxis").getContext("2d");
                    targetCtx.canvas.width = copyWidth;
            targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight);

CSS
.chartWrapper {
        position: relative;

    }
    .chartWrapper > canvas {
        position: absolute;
        left: 0;
        top: 0;
        pointer-events:none;
    }
.chartAreaWrapper {
      overflow-x: scroll;
        position: relative;
        width: 100%;
    }
    .chartAreaWrapper2 {
        position: relative;
        height: 300px;
}

Ответы [ 2 ]

1 голос
/ 22 марта 2020

a

chart.js docs: "Следующие примеры не работают:"

= Любые размеры холста, такие как (<canvas style="width: 100px;..") + абсолютное положение и другие уловки не будут работать.

b

Диаграмма. js использует свой родительский контейнер для обновления размеров отображения и отображения холста. Однако этот метод требует, чтобы контейнер был относительно позиционирован и выделен для только холст диаграммы. После этого можно добиться отзывчивости, задав относительные значения для размера контейнера https://www.chartjs.org/docs/latest/general/responsive.html#important -примечание 

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

= установить любой размер, который вы хотите chart-container.

c

  • maintainAspectRatio - по умолчанию true (сохранить исходное соотношение сторон холста (ширина / высота) при изменении размера).

  • responive - по умолчанию (изменяет размер холста диаграммы, когда его контейнер)

a + b + c

Я не знаю, почему другие Ответы stackoverflow дают такие «сложные» решения. overflow-x она работает как любой другой элемент уровня блока (поместите изображение размером 800px w внутри 600px W div = 200px overflow-x).

Пример "Hello World"

Specifi c для переполнения добавить дополнительную оболочку к chart-container: 

<div style="overflow-x: scroll">
  <div class="chart-container" style="position: relative;  width:900px;">
    <canvas id="chart"></canvas>
  </div>
</div>

Когда ширина экрана будет меньше чем 900px вы получаете горизонтальную прокрутку (например, на мобильном телефоне):

enter image description here

** Использование CSS точек останова изменить размер контейнера на мобильном телефоне, если хотите. 

/* data */
var data = {
  labels: ["Africa", "Asia", "Europe", "America"],
  datasets: [{
    /* data */
    label: "Data label",
    backgroundColor: ["red", "#8e5ea2","#3cba9f", '#1d49b8'],
    data: [5.0,6.7,7.5, 8.6, 3.3, 4.4, 4.5]
  }]
};

var options = {
  responsive: true,
  maintainAspectRatio: true,
  title: {
    text: 'Hello',
    display: true
  },
  scales: {
    xAxes: [{
      stacked: false,
      ticks: {

      },
    }],
    yAxes: [{
      stacked: true,
      ticks: {

      }
    }]
  }
};

var myChart = new Chart(document.getElementById("chart"), {
  type: 'bar',
  data: data,
  options: options
});

document.getElementById('submitChange').addEventListener('click', function() {
  console.log("before color: " + myChart.data.datasets[0].backgroundColor[0]);
  myChart.data.datasets[0].backgroundColor[0] = "green";
  myChart.update();
});
div{
  border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div style="overflow-x: scroll">
  <div class="chart-container" style="position: relative;  width:900px;">
    <canvas id="chart"></canvas>
  </div>
</div>
0 голосов
/ 21 марта 2020

Используйте "overflow-x: scroll;" вместо «переполнение: прокрутка;»

...