小编itw*_*ck3的帖子

Chartjs v2 - 多个数据集的格式工具提示(条形和直线)

阅读了很多关于如何使用工具提示回调格式​​化ChartJS v2.x中的工具提示的内容.到目前为止我已经取得了成功,但发现我无法为我拥有的两个数据集定义两种不同的格式.

作为一个更多的上下文,我有一个折叠在条形图顶部的折线图:

  • 我的条形数据是数字的(以百万计,需要舍入和截断).
  • 示例:22345343需要在工具提示中显示为22M

  • 我的行数据是一种货币
  • 例如:146.36534需要显示为$ 146.37的tooptip

到目前为止,这是我的简短WIP代码.这会将工具提示格式化为圆形并包含$符号.如何扩展它以便我可以在工具提示中单独格式化条形数据?


tooltips: {
                mode: 'index',
                intersect: false,
                callbacks: {
                    label: function(tooltipItem, data) {
                        return "$" + Number(tooltipItem.yLabel).toFixed(2).replace(/./g, function(c, i, a) {
                                    return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
                                });
                    }
                }
            }
Run Code Online (Sandbox Code Playgroud)

chart.js

11
推荐指数
1
解决办法
1万
查看次数

Chartjs v2.5 - 仅按比例显示最小值和最大值,按比例显示绝对定位

我创建了一个非常简单的折线图,用于移动设备.我发现当我包含比例时,它会占据图表侧面的大量空间.

相反,我在其他移动图表上看到的只显示了最小值和最大值.用户可以使用工具提示查找详细信息.

无论如何,我希望有人能告诉我如何创建像这样的比例:

想要输出

这种规模的两个主要方面:

  1. 仅显示最小值和最大值
  2. 它们的绝对位置大致位于左上角和右下角.

我的思维过程可能正在使用scaleOverride,然后只是定义scaleSteps : 1一个scaleStepWidth等于我的数据的最小值和最大值之间的差异.即使这是在正确的轨道上,我也不知道如何将比例尺的定位覆盖为绝对的并且不会占用距离线本身的空间.

javascript chart.js chart.js2

2
推荐指数
1
解决办法
1452
查看次数

标签 统计

chart.js ×2

chart.js2 ×1

javascript ×1