时间戳

首页 > 解决方案 > C3js - 仅在图表的最后一点显示圆圈

c3.js - C3js - 仅在图表的最后一点显示圆圈

问题描述

我的图表目前包含所有隐藏点（我指的是“球”圈），但我需要它们仅在最后一点显示球。

看看这张图片，看看我到底需要什么。

图片

如您所见，除了最后一个之外，所有点“球”都被隐藏了。

我查看了 C3js 材料，但没有发现任何对我有帮助的东西。

有谁知道我该怎么做？

我当前的代码。

var area_chart = c3.generate({
            bindto: '#chart',
            size: { height: 350, width: 800 },
            point: {
                show: false
            },
            color: {
                pattern: ['#000', '#E53935']
            },
            data: {
                columns: [
                    ['Meta', 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
                    ['Produção', 200, 280, 280, 280, 260, 260, 260, 260, 270, 270, 270, 270, 270, 230, 240, 280, 300],
                ],
                types: {
                    Produção: 'area-spline',
                }
            },
            axis: {
                x: {
                    type: 'category',
                    categories: ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30'],
                    tick: {
                        rotate: 60,
                        multiline: false
                    },
                }
            },
            grid: {
                x: {
                    show: true
                },
                y: {
                    show: true
                }
            }
        });
<div id="chart"></div>

代码

标签： c3.js

解决方案

如果您在浏览器 DOM 检查器中打开图表，您可以深入查看图表并查看结构。然后，您可以使用您最喜欢的 DOM 操作库 - 我在示例中使用 jquery，找到圆圈并将它们隐藏，除了最后一个。

我会包含一个工作片段，因为它是如此微不足道，但 SO 会引发脚本错误，所以这里是 pen。

重要的线是这个。请注意，您应该从已知元素开始搜索 - 最好是图表容器，这样您就不会随机杀死同一页面上其他图表上的气泡。将此行放在您的 C3 生成命令之后。

$('#chart').find('.c3-circle:not(:last)').css({opacity: 0})

像 jquery 这样的库听起来像是一个很大的学习练习，但是您可以像这样学习简单的 DOM 狙击，而无需花费太多时间。

推荐阅读