Question

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

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

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

我看了看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>

CODE

Answer 1

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

我本来会包含一个有效的代码段，因为它是如此琐碎，但会引发脚本错误，所以here is a pen。

重要的是这个。请注意，您应该从已知的元素（最好是图表容器）开始搜索，以免随机杀死同一页面上其他图表上的气泡。在C3 generate命令之后放置此行。

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

像jquery这样的库听起来可能是一项艰巨的学习活动，但是您无需花费大量时间就可以学习这种简单的DOM剪裁。

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

1 个答案: