Javascript 如何在Flask应用程序的Chart.js中按比例分布y记号？

我正在使用一个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>

//全局参数：
//当图表画布的容器调整大小时，请勿调整其大小（保持在600x400px）
Chart.defaults.global.responsive=false；
//定义图表数据
var图表数据={
标签：[{%用于标签%中的项目]
“{{item}}”，
{%endfor%}]，
数据集：[{
标签：“功能”，
填充：是的，
线张力：0.1，
背景颜色：[“#32a852”、“#a83232”]，
边框颜色：“rgba（75192192,1）”，
borderCapStyle:“butt”，
borderDash:[]，
borderDashOffset:0.0，
borderJoinStyle:'斜接'，
pointBorderColor:“rgba（75192192,1）”，
pointBackgroundColor:#fff“，
点边界宽度：1，
点半径：5，
pointHoverBackgroundColor:“rgba（75192192,1）”，
pointHoverBorderColor:“rgba（2201）”，
pointHoverBorderWidth:2，
点半径：1，
点半径：10，
数据：[{%用于值%]中的项]
{{item}}，
{%endfor%}]，
空白：假
}]
}
//获取图表画布
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
//使用图表画布创建图表
var myChart=新图表（ctx{
类型：'bar'，
数据：图表数据，
选项：{
scaleShowValues:true，
图例：{
显示：假
},
比例：{
xAxes：[{
滴答声：{
分:0,，
自动跳转：错误
}
}]
}
}
});
选项：{
图例：{
显示：假
}
}

---

values

是一个包含两个元素的列表，分别对应于正值和负值。如何使y记号从0开始？此外，这些值可能真的不同，它们可以是100秒甚至1000秒。

您在x轴上定义了

ticks.min

，而不是在y轴上

而不是这样做

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

试试这个：

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