【问题标题】:clip path in highcharts chart makes line invisiblehighcharts 图表中的剪辑路径使线条不可见
【发布时间】:2013-06-26 14:04:34
【问题描述】:

在我的 Java 应用程序中,我有一个 Highcharts 折线图。我可以看到图表和线条创建正确,但线条不可见。使用 Firebug 一段时间后,我发现线元素的剪辑路径导致问题。当我删除剪辑路径时,一切正常。有谁知道这个剪辑路径是什么,在哪里创建以及如何防止创建?

提前致谢

带有剪辑路径的图表部分

 <g class="highcharts-series-group" zIndex="3">
        <g class="highcharts-series" clip-path="url(http://localhost:8080/TEST/HvvKdhLBG_GOfT12f3Kh54IJiiZArBH0Chyl1i37kuIDMchs8P9Vf5Fk23LJVwIebtPVrBoSelg/Hvv97#highcharts-1)" visibility="visible" transform="translate(69,40)">
    </g>

代码:

$(document).ready(function()
        {
            var chart1; // globally available
            $(function()
            {
                var chart = new Highcharts.Chart({
                    chart : {
                        renderTo: 'container',
                        defaultSeriesType: 'line'
                    },
                    yAxis : {
                        title: {
                            x: -20
                        },
                        plotLines : [ {
                            value : 0,
                            width : 1,
                            color : '#808080'
                        } ]
                    },
                    xAxis : {
                        categories : [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]
                    },
                    series : [ {
                        data : [ 29.9, null, 106.4, 129.2, 144.0, 176.0, null, 148.5, 216.4, 194.1, 95.6, 54.4 ],
                    } ]
                });
            });
        });

【问题讨论】:

    标签: javascript jquery charts highcharts wicket


    【解决方案1】:

    好吧,我打开你的例子,line series 是可见的,但是有差距,因为你使用空值,所以我不确定是什么问题?

    http://jsfiddle.net/eunLz/

    【讨论】:

    • 如果我将它导出为 pdf,它也看起来像这样。但是由于剪辑路径(萤火虫可以看到它们),您的版本可以工作。在您的代码中,我可以看到:clip-path="url(#highcharts-1)">,但在我的代码中有一个更大的字符串,这弄乱了我的行
    猜你喜欢
    • 2013-11-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-11-09
    • 2019-06-07
    • 1970-01-01
    • 2021-02-14
    相关资源
    最近更新 更多