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

Question

我的图表目前有所有隐藏点（我指的是 "balls" 圆圈），但我只需要它们在最后一个点显示球。

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

Picture

如您所见，所有点 "balls" 都被隐藏了，除了最后一个。

我查看了 C3js material，但没有找到任何可以帮助我的东西。

有人知道我该怎么做吗？

我当前的代码。

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>

CODE

Answer 1

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

我会包含一个工作片段，因为它非常简单，但会引发脚本错误，所以 here is a pen.

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

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

像 jquery 这样的库听起来像是一个很大的学习练习，但你可以学习像这样简单的 DOM 狙击而不需要太多时间投入。

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

C3js - Show circle only at the last point of the graph

c3.js