Question

我在我的Rails应用程序中使用https://github.com/ankane/chartkick，我想画一个折线图（多个系列是specyfic），它将在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
它采用一系列值 - ＆gt; [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工具提示......

Chartkick Y轴的百分比和值组合

1 个答案: