Как можно сделать изогнутые гистограммы или изогнутые столбчатые диаграммы на диаграмме. js? - PullRequest
Новая
       28

Как можно сделать изогнутые гистограммы или изогнутые столбчатые диаграммы на диаграмме. js?

0 голосов
/ 14 марта 2020

Мы пытаемся создать изогнутый столбец, похожий на изображение ниже, это не выглядит возможным на графике. js

Cured Barchart

Любые предложения, касающиеся это?

1 Ответ

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

Вы можете сделать это с помощью диаграммы line, как показано в примере кода ниже, который необходимо еще улучшить, чтобы получить ожидаемый результат. 

new Chart(document.getElementById('myChart'), {
    type: 'line',
    data: {
        labels: [1, 2, 3, 4, 5, 6, 7],
        datasets: [
          {
              data: [0, 5, 0, 0, 0, 0, 0],
              fill: true,
              backgroundColor: 'rgb(255, 0, 0, 0.7)',
              backgroundColor: 'rgb(255, 0, 0, 0.7)',
              lineTension: 0.4,
              pointHitRadius: 0
          },
          {
              data: [0, 0, 9, 0, 0, 0, 0],
              fill: true,
              backgroundColor: 'rgb(255,165,0, 0.7)',
              backgroundColor: 'rgb(255,165,0, 0.7)',
              lineTension: 0.6,
              pointHitRadius: 0
          },
          {
              data: [0, 0, 0, 6, 0, 0, 0],
              fill: true,
              backgroundColor: 'rgb(255, 215, 0, 0.7)',
              backgroundColor: 'rgb(255, 215, 0, 0.7)',
              lineTension: 0.6,
              pointHitRadius: 0
          },
          {
              data: [0, 0, 0, 0, 5, 0, 0],
              fill: true,
              backgroundColor: 'rgb(59, 161, 151, 0.7)',
              backgroundColor: 'rgb(59, 161, 151, 0.7)',
              lineTension: 0.6,
              pointHitRadius: 0
          },
          {
              data: [0, 0, 0, 0, 0, 4, 0],
              fill: true,
              backgroundColor: 'rgb(100, 100, 100, 0.7)',
              backgroundColor: 'rgb(100, 100, 100, 0.7)',
              lineTension: 0.4,
              pointHitRadius: 0
          }
        ]
    },
    options: {
        responsive: true,
        elements: {
          point:{
            radius: 0
          }
        },
        title: {
            display: false,
        },
        legend: {
            display: false
        },
        tooltips: {
            display: false
        },
        scales: {
            yAxes: [{
               ticks: {
                 display: false
               },
               gridLines: {
                 display: false
               }
            }],
            xAxes: [{
               ticks: {
                 display: false
               },
               gridLines: {
                 display: false
               }
            }],
        }
    }
});
canvas {
  max-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
...