Диаграмма JS - Линейный график, сокращающийся сверху и справа - PullRequest
Новая
       13

Диаграмма JS - Линейный график, сокращающийся сверху и справа

0 голосов
/ 23 мая 2019

Я пытался построить линейный график, используя диаграмму JS.График обрезается справа и сверху.Пробовал с использованием padding, но все еще сталкивается с той же проблемой.Другая проблема заключается в том, что оси X и Y очень легкие.Они редко видны.Вот график, который сокращается [https://i.stack.imgur.com/xz9a2.jpg].

Это код, который пытался 

var time = ["0", "150", "0", "10", "20", "30", "0", "150", "0", "150", "0", "150", "0", "50", "200", "250", "200", "300"]
var temperature = ["50", "650", "50", "650", "850", "1030", "50", "560", "50", "560", "50", "560", "50", "1200", "1250", "1300", "1350", "1400"]
var ctx = document.getElementById('myChart').getContext('2d');
    ctx.width=500;
    var chart = new Chart(ctx, {
        type: 'line',
         data: {
            labels: time,
            datasets: [{
                borderColor: 'rgb(0,0,0)',
                data: temperature,
                fill:false,
                steppedLine: true,
            }]
        },
         options: {
                bezierCurve : false,
                animation: false,
                    legend: false,
                    //Changing Plugins
                    plugins:{
                    datalabels: {
                    color: '#1a1b1c',
                    align: 'end',
                    anchor: 'end',
                    font: {
                    weight: 'bold',
                    size: 20,
            },
            },
                    },
                    scales: {
                        xAxes: [{
                                display: true,
                                fontColor: 'black',
                                fontSize:20,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Time',
                                },
                                ticks: {
                                    fontColor: "black",
                                    fontStyle: "bold",
                                    fontSize: 20,
                                  },
                                  gridLines: {
                                    display:false
                                }
                            }],
                        yAxes: [{
                                display: true,
                                fontColor: 'black',
                                fontSize:20,
                                scaleLabel:{
                                    labelString: 'Temperature',
                                },
                                ticks: {
                                    beginAtZero: false,
                                    steps: 100,
                                    stepValue: 25,
                                    //max: 1200,
                                    fontColor: "black", 
                                    fontStyle: "bold",
                                    fontSize: 20,
                                },
                                gridLines: {
                                    display:false
                                },
                            }],
                    },
    },
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
    <canvas id="myChart" width="400" height="400"></canvas>
...