Как пропорционально распределить y-тики в приложении Chart. js в Flask? - PullRequest
Новая
       77

Как пропорционально распределить y-тики в приложении Chart. js в Flask?

0 голосов
/ 06 августа 2020

Я использую приложение Flask, которое отображает график в одной точке. Я использую Chart. js для отображения графика. Все работает нормально, но y-тики не отрегулированы должным образом, поэтому мой график выглядит странно. поскольку y-тики не начинаются с 0, «ОТРИЦАТЕЛЬНЫЙ» столбец выглядит ужасно маленьким, хотя он составляет половину «ПОЛОЖИТЕЛЬНОГО» бара.

введите описание изображения здесь

Я передаю значения, переданные пользователем, в код js для отображения графика. Вот он: 

  <script>
    // Global parameters:
// do not resize the chart canvas when its container does (keep at 600x400px)
Chart.defaults.global.responsive = false;

// define the chart data
var chartData = {
 labels : [{% for item in labels %}
           "{{item}}",
          {% endfor %}],
 datasets : [{
     label: 'features',
     fill: true,
     lineTension: 0.1,
     backgroundColor: ["#32a852", "#a83232"], 
     borderColor: "rgba(75,192,192,1)",
     borderCapStyle: 'butt',
     borderDash: [],
     borderDashOffset: 0.0,
     borderJoinStyle: 'miter',
     pointBorderColor: "rgba(75,192,192,1)",
     pointBackgroundColor: "#fff",
     pointBorderWidth: 1,
     pointHoverRadius: 5,
     pointHoverBackgroundColor: "rgba(75,192,192,1)",
     pointHoverBorderColor: "rgba(220,220,220,1)",
     pointHoverBorderWidth: 2,
     pointRadius: 1,
     pointHitRadius: 10,
     data : [{% for item in values %}
              {{item}},
            {% endfor %}],
     spanGaps: false
 }]
}

// get chart canvas
var ctx = document.getElementById("myChart").getContext("2d");

// create the chart using the chart canvas
var myChart = new Chart(ctx, {
 type: 'bar',
 data: chartData,
 options: {
  scaleShowValues: true,
  legend: {
    display: false
  },
  scales: {
    xAxes: [{
      ticks: {
        min : 0,
        autoSkip: false
      }
    }]
  }
}
});

options: {
        legend: {
            display: false
        }
}

</script>

values - это список, содержащий 2 элемента, соответствующих положительным и отрицательным значениям. Как сделать так, чтобы координаты оси Y начинались с 0? Кроме того, значения могут действительно отличаться, они могут быть от 100 до 1000.

1 Ответ

1 голос
/ 06 августа 2020

Вы определили ticks.min на оси x вместо того, чтобы делать это на оси y.

Вместо этого ... 

xAxes: [{
  ticks: {
    min : 0,
    autoSkip: false
  }
}]

попробуйте следующее: 

yAxes: [{
  ticks: {
    min : 0,
    stepSize: 10
  }
}]
...