Как уменьшить ширину дна треугольника, используя линейный график на графике Js? - PullRequest
Новая
       97

Как уменьшить ширину дна треугольника, используя линейный график на графике Js?

0 голосов
/ 11 апреля 2020

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

Что пробовали: - 

var presets = window.chartColors;
        var utils = Samples.utils;
        var inputs = {
            min: 0,
            max: 100,
            count: 8,
            decimals: 2,
            continuity: 1
        };

        function generateData(config) {
            return utils.numbers(Chart.helpers.merge(inputs, config || {}));
        }

        function generateLabels(config) {
            return utils.months(Chart.helpers.merge({
                count: inputs.count,
                section: 3
            }, config || {}));
        }

        var options = {
            maintainAspectRatio: false,
            spanGaps: false,
            elements: {
                line: {
                    tension: 0.000001
                }
            },
            plugins: {
                filler: {
                    propagate: false
                }
            },
            scales: {
                xAxes: [{
                    ticks: {
                        autoSkip: false,
                        maxRotation: 0
                    }
                }]
            }
        };

        [false, 'origin', 'start', 'end'].forEach(function(boundary, index) {
              const canvas = document.getElementById('chart-' + index);
              if(canvas)
              {
               utils.srand(8);
               var ctx = canvas.getContext('2d');
              new Chart(ctx, {
                  type: 'line',
                  data: {
                      labels: generateLabels(),
                      datasets: [{
                          backgroundColor: utils.transparentize(presets.red),
                          borderColor: presets.red,
                          //data: generateData(),
                          data: [0, 0, 40, 0,0, 50, 0, 0, 0],
                          label: 'Dataset',
                          fill: boundary
                      }]
                  },
                  options: Chart.helpers.merge(options, {
                      title: {
                          text: 'fill: ' + boundary,
                          display: true,
                      }
                  })
              });
            }
        });
<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>area > boundaries | Chart.js sample</title>
    <link rel="stylesheet" type="text/css" href="https://www.chartjs.org/samples/latest/style.css">
    <script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
    <script src="https://www.chartjs.org/samples/latest/utils.js"></script>
    <script src="https://www.chartjs.org/samples/latest/charts/area/analyser.js"></script>
</head>

<body>
    <div class="content">
        <div class="wrapper col-2"><canvas id="chart-2"></canvas></div>
    </div>

  
</body>

</html>

Ответ будет оценен по достоинству!

Спасибо за ваши усилия!

1 Ответ

1 голос
/ 12 апреля 2020

Вы можете определить xAxis как ось времени , избавиться от data.labels и указать отдельные точки данных как объекты со свойствами x и y .

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

new Chart('canvas', {
  type: 'line',
  data: {
    datasets: [{
      label: 'My Dataset',
      data: [
        { x: '01-01', y: 0 },
        { x: '02-26', y: 0 },
        { x: '03-01', y: 40 },
        { x: '03-05', y: 0 },
        { x: '05-28', y: 0 },
        { x: '06-01', y: 50 },
        { x: '06-05', y: 0 },
        { x: '08-01', y: 0 }
      ],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgb(255, 99, 132)',    
      lineTension: 0
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',        
        time: {
          parser: 'MM-DD',
          unit: 'month',
          displayFormats: {
             month: 'MMM'
          },
          tooltipFormat: 'MMM DD'
        }
      }]
    }     
  }
});
canvas {
  max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" width="8" height="4"></canvas>
...