猿问

如何使用 chartJs 自定义图表？

我正在尝试制作像这个屏幕截图这样的图表。

现在我使用chartjs如下： -

<!DOCTYPE html>

<html>


<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

                    }

                }]

            }

        };

有一个问题，这与屏幕截图不完全一样，我怎样才能使它与屏幕截图中的一样？


当年话下
浏览 137回答 1
1回答

慕的地8271018

您正在正确使用图表，并且正在使用适当的type: line. 您只需设置正确的值即可完全按照图像显示图表。我希望这能给你一个想法var presets = window.chartColors;&nbsp; &nbsp; &nbsp; &nbsp; var utils = Samples.utils;&nbsp; &nbsp; &nbsp; &nbsp; var inputs = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; min: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max: 100,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; count: 8,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; decimals: 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; continuity: 1&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; function generateData(config) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return utils.numbers(Chart.helpers.merge(inputs, config || {}));&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function generateLabels(config) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return utils.months(Chart.helpers.merge({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; count: inputs.count,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; section: 3&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, config || {}));&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; var options = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maintainAspectRatio: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; spanGaps: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elements: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; line: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tension: 0.000001&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; plugins: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filler: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; propagate: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; autoSkip: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxRotation: 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; [false, 'origin', 'start', 'end'].forEach(function(boundary, index) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const canvas = document.getElementById('chart-' + index);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(canvas)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;utils.srand(8);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var ctx = canvas.getContext('2d');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new Chart(ctx, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'line',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; labels: generateLabels(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: utils.transparentize(presets.red),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderColor: presets.red,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //data: generateData(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [0, 0, 40, 0,0, 50, 0, 0, 0],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'Dataset',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fill: boundary&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options: Chart.helpers.merge(options, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: 'fill: ' + boundary,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="utf-8">&nbsp; &nbsp; <meta http-equiv="X-UA-Compatible" content="IE=Edge">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1">&nbsp; &nbsp; <title>area > boundaries | Chart.js sample</title>&nbsp; &nbsp; <link rel="stylesheet" type="text/css" href="https://www.chartjs.org/samples/latest/style.css">&nbsp; &nbsp; <script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>&nbsp; &nbsp; <script src="https://www.chartjs.org/samples/latest/utils.js"></script>&nbsp; &nbsp; <script src="https://www.chartjs.org/samples/latest/charts/area/analyser.js"></script></head><body>&nbsp; &nbsp; <div class="content">&nbsp; &nbsp; &nbsp; &nbsp; <div class="wrapper col-2"><canvas id="chart-2"></canvas></div>&nbsp; &nbsp; </div>&nbsp;&nbsp;</body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答