javascript - RGraph瀑布图: Get rid of lines connecting bars-6ren

javascript - RGraph瀑布图: Get rid of lines connecting bars

转载作者：行者123 更新时间：2023-12-02 23:24:31

24

4

我使用 RGraph 创建了一个瀑布，如下图所示。除了连接每个条形的细线之外，一切看起来都很棒。我在图中用红色圈出了它们。我怎样才能摆脱这些细连接线？我在文档中找不到它。

参见my jsfiddle here对于工作版本。

代码:

html:

<html>
    <body>
        <canvas id="cvs" width="800px" height="300px"></canvas>
    </body>
</html>

JavaScript:

    var waterfallChart = new RGraph.Waterfall({
        id: 'cvs',
        data: [570.00, -7.39, -26.61, -18.69, -4.24],
        options: {
            linewidth: 0,
            colors: ["#b3b3b3", "#afe5ed", "#afe5ed", "#afe5ed", "#afe5ed", "#6f2e92"],
            colorsStroke: "#ffffff",
            colorsSequential: true,
            title: "The Title Of My Chart",
            titleColor: "#727272",
            titleSize: 15,
            labelsAbove: true,
            labelsAboveDecimals: 2,
            labelsAboveUnitsPre: "$",
            axes: false,
            backgroundGrid: false,
            backgroundBarsCount: 0,
            yaxisLabels: false,
            yaxisTickmarksCount: 0,
            xaxisTickmarksCount: 0,
            yaxisScaleMin: 450,
            xaxisLabelsSize: 10,
            xaxisLabels: ['Plan 3',
                          'This is\na label',
                          'This is \nanother label',
                          'This is\na thing',
                          'This is\nyet another thing',
                          'blah'],
            xaxisLabelsOffsety: 50,
            xaxisLabelsColor: "#9f9f9f"
        }
    });
    // waterfallChart.Set('chart.gutter.bottom',35);
    waterfallChart.draw();

感谢您的帮助!

最佳答案

它们只是连接线 - 没有选项可以将它们关闭，但您可以通过执行以下操作来更改源以隐藏它们:

在 RGraph.waterfall.js 的第 1318 行(或附近)，您会发现以下几行:

co.lineWidth   = 1;
co.strokeStyle = '#666';

将它们改为:

co.lineWidth   = 0.00001; // Don't zet to zero
co.strokeStyle = 'rgba(0,0,0,0)'; // transparent

关于javascript - RGraph瀑布图: Get rid of lines connecting bars，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56798580/

24

4

0

文章推荐： javascript - 处理回调选项在 jQuery 文件上传中不起作用

文章推荐： javascript - 将矩阵线分成组并使用位置获取组

javascript - 仅在图像加载后应用 jQuery 瀑布 'reflow'
我正在为我的网格样式显示使用 jQuery 瀑布。为了解决常见的图像重叠问题，我将瀑布方法包装在 .load() 函数中，例如: $(window).load(function(){ $('#b
project-management - 敏捷、瀑布、Scrum……将团队转变为迭代开发有多难？
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 3年前关闭。 Improve thi
javascript - 覆盖 Highcharts 瀑布 isSum() 值
对于瀑布图，如果设置为 isSum() ，是否有办法覆盖列标签上显示的值，不幸的是，每列传递的值都会四舍五入，因此会出现当最后一列设置为 isSum() 时，与 Excel 数据相比存在差异。最佳答

首页

博学

6Ren·AI

商城

javascript - RGraph瀑布图: Get rid of lines connecting bars