当前位置: 首页 > 知识库问答 >
问题:

如何在 chartjs 中将起始值设置为“0”?

张敏达
2023-03-14

这是我的代码。我需要在x和y轴刻度中将初始值设置为“0”。我尝试了最新的版本刻度选项。

graphOptions = {               
            ///Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines: false,    
            tooltipTitleTemplate: "<%= label%>",
            //String - Colour of the grid lines
            scaleGridLineColor: "rgba(0,0,0,.05)",
            //Number - Width of the grid lines
            scaleGridLineWidth: 1,
            //Boolean - Whether to show horizontal lines (except X axis)
            scaleShowHorizontalLines: true,
            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines: true,
            //Boolean - Whether the line is curved between points
            bezierCurve: true,
            //Number - Tension of the bezier curve between points
            bezierCurveTension: 0.4,
            //Boolean - Whether to show a dot for each point
            pointDot: true,
            //Number - Radius of each point dot in pixels
            pointDotRadius: 4,
            //Number - Pixel width of point dot stroke
            pointDotStrokeWidth: 1,               
            pointHitDetectionRadius: 20,               
            datasetStroke: true,
            datasetStrokeWidth: 2,
            datasetFill: true,               
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
        };
        var LineChart = new Chart(ctx).Line(graphData, graphOptions);
   }     

共有3个答案

薄欣怿
2023-03-14

如果您需要将其用作默认配置,只需将< code>min: 0放入节点< code > defaults . scale . ticks 中,如下所示:

defaults: {
  global: {...},
  scale: {
    ...
    ticks: { min: 0 },
  }
},

参考:https://www.chartjs.org/docs/latest/axes/

柴深
2023-03-14

现在(5年后,版本3.x)有点不同了

options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }

参见:https://www.chartjs.org/docs/latest/#creating-a-chart

花阳辉
2023-03-14

对于图表.js 2.*,线性刻度从零开始的选项列在线性刻度的配置选项下。这用于数值数据,这很可能是 y 轴的情况。因此,您需要使用以下命令:

options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

此处还提供了示例折线图,其中选项用于y轴。如果您的数值数据在x轴上,请使用xax而不是yax。请注意,数组(和复数)用于yax(或xax),因为您也可能有多个轴。

 类似资料:
  • 我已经尝试了我能想到的一切。我似乎无法让图表尊重到达div的底部。我在此 Codepen 中复制了我的图表,以便于分叉和编辑。我基本上将我的CSS直接从开发工具复制并粘贴到代码笔中 https://codepen.io/spkellydev/pen/JwQqKr?editors=1011

  • 我正在尝试使用创建条形图。我试图让图表显示条向上,而低于1(例如0.8)的值向下。如果图表包含低于零的值,则将显示相同的图表。本质上,我试图将Y轴的基线改为1而不是0。 像这样:

  • 我试图做一个条形图,它将显示数据超过和低于基础起点,这不是0。 我尝试使用yAxes缩放选项的最小值和最大值,但它只是隐藏了超过设置最小值/最大值的条形图,并将“beginAtZero”设置为false。

  • 问题内容: 我希望将值设置为如果我提交的表单中的文本框未放入任何内容。我怎样才能做到这一点?我尝试插入,但这只是将单词添加到字段中。 我不确定应该为此提供什么代码,我只是在编写UPDATE查询。 问题答案: 不要在更新语句中加引号。这应该工作:

  • 问题内容: 如何在Java中使用org.json.JSONObject将值设置为null?我肯定可以通过使用isNull来读取值是否为null,但是当我将其设置为null时,它只会忽略我: 问题答案: 尝试设置而不是: 用于明确定义没有值的名称的哨兵值。与null不同,具有以下值的名称: 显示在names()数组中 出现在keys()迭代器中 为has(String)返回true 不要抛出get(

  • 我是spring boot的新手,正在学习