【问题标题】:Setting ticks of Chart.js in html.erb file在 html.erb 文件中设置 Chart.js 的刻度
【发布时间】:2021-05-27 20:22:32
【问题描述】:

我在 Ruby on Rails 中使用 chartkick 和 chart.js。我查看了文档和一些问题,但找不到任何解决问题的方法。

我在 html.erb 文件中设置我的图表,如下所示:

<%=
    line_chart $hash_chart,
        options: {
            max: $value.max+5,
            min: $value.min-5,
            allowDecimals: false,
            colors: color_line,
            xtitle: "Title of x axis",
            ytitle: "Title of y axis",
            discrete: true,
            points: false,
            width: "500px",
            height: "500px",
            scales: {
                yAxes: [{
                    distribution: 'linear'
                }],
                xAxes: [{
                    distribution: 'linear',
                    type: 'category', (part of a configuration attempt)
                    categories: $time, (part of a configuration attempt)
                    ticks: {
                        stepSize: 10
                    }
                }]
            }
        }
%>

高度参数之前的设置有效,但缩放设置无效。这个问题的答案正是我所做的(根据 Chart.js 的文档),但没有奏效:Force display of ticks on xAxes using chartkick gem and chart.js。我也尝试将此设置放在库大括号中。

基本上,我想在 x 轴上设置刻度并只显示我的数据数组的一些标签。是否可以格式化(使用这种类型的文件)?

【问题讨论】:

  • 应该将高度和宽度的值引用为字符串吗?
  • 是的,我写错了,对不起。它们需要是字符串。我编辑了问题。

标签: html ruby-on-rails chart.js chartkick


【解决方案1】:

您使用了错误的旧 v2 语法 chart.js,例如 v3 中的比例必须像这样配置

scales: {
  x:{
    ticks: {}
  },
  y: {
  // Y config
  }
}

编辑: 由于您使用的是 V2,因此声明轴的语法是正确的,请确保您没有运行最新版本的 chartKick,因为它使用的是 v3。

distribution 不会做任何事情,除非您的比例类型是 timestepSize 仅适用于线性和时间尺度,因此您需要将 type: 'category' 更改为 type: 'linear' 或者如果您使用时间数据,则更改为 type: 'time' 如果您使用时间数据,则必须在 @ 中配置步长987654328@ 子部分,因此您需要将 ticks 更改为 time

【讨论】:

  • 感谢您的回复。我实际上使用的是 Chart.js 的 2.6 版(由于与另一个库的兼容性问题),但我也尝试这样做。我无法让 stepSize 工作。
  • 为您更新答案
  • 经过一番尝试,我发现了其中一个错误。我忘记将文件导入chart.js。另外,选项大括号不起作用,所以我删除了,我做了你说的所有事情,非常有帮助。谢谢。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-11-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多