Как настроить график, используя график Js? - PullRequest
Новая
       50

Как настроить график, используя график Js?

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

Я пытаюсь сделать график, подобный этому скриншоту.

enter image description here

Теперь я использую chartjs, как указано ниже: - 

<!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"></canvas></div>
    </div>

    <script>
        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,'start'].forEach(function(boundary, index) {

            utils.srand(8);

            new Chart('chart', {
                type: 'line',
                data: {
                    labels: generateLabels(),
                    datasets: [{
                        backgroundColor: utils.transparentize(presets.red),
                        borderColor: presets.red,
                        data: generateData(),
                        label: 'Dataset',
                        fill: boundary
                    }]
                },
                options: Chart.helpers.merge(options, {
                    title: {
                        text: 'fill: ' + boundary,
                        display: true,
                    }
                })
            });
        });
    </script>
</body>

</html>

Существует проблема, это не совсем как скриншот, как я могу сделать это так же, как на скриншоте?

1 Ответ

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

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

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>
...