Chartkick Y 轴的百分比和值组合

Question

我在我的 Rails 应用程序中使用https://github.com/ankane/chartkick，我想绘制一个折线图（需要指定多个系列），它将在 Y 轴上显示百分比值，但在工具提示中显示实际数值。这是否可以实现（可以在任何 JS 图表适配器中：Chart.js、Google Charts 或 Highcharts）？

Answer 1

使用google charts，您可以轻松自定义轴标签和工具提示

每一行的列值可以是字符串或数字等固有值

或者，您可以使用对象表示法来提供值

数据表中的每个单元格都可以表示为具有以下键的对象

v - 值
f - 格式化值

这意味着我们可以为 y 轴提供我们想要的值，
以及显示在工具提示上的格式化值

{
  v: 0.62,
  f: '62'
}

虽然，主要关注工具提示，here is a simple example 来演示

如果由于某种原因单独无法满足您的需求

轴标签和工具提示都可以根据需要进一步定制

轴标签
在configuration options 中找到折线图，
可以使用 ticks
提供自定义轴标签 对于 y 轴，具体选项为 vAxis.ticks
它接受一个值数组 --> [0.10, 0.20, 0.30]
或对象，再次使用上述键

[
  {v: 0.10, f: '10%'},
  {v: 0.20, f: '20%'},
  {v: 0.30, f: '30%'}
]

here is a working example 使用ticks

工具提示
customizing tooltips 相当直接

如前所述，默认工具提示将显示格式化值 (f:)

或者你可以提供一个包含你需要显示的内容的html字符串

每个系列都可能有自己的自定义工具提示，
在每个系列列后添加'tooltip' column role

here is a working example 用于提供自定义 html 工具提示...