为什么我的图表导出饼图/图例的顶部黑色?

时间:2018-02-16 00:50:28

标签: javascript amcharts

我正在导出我的图表饼图并且一些颜色导出正常,但其他颜色在图例中显示为黑色以及饼图的顶部。更奇怪的是,因为它是一个3D饼图,所以两侧显示正确的颜色。

Example of pie chart problem

                        chart["export"].capture({}, function() {
                        this.toPNG({multiplier: 2}, function(data) {
                            if(this.config.fileName == "dynamic_pie_holder") {
                                $("#pie_image").val(encodeURIComponent(data));
                            }
                            if(this.config.fileName == "sector_pie_holder") {
                                $("#sector_pie_image").val(encodeURIComponent(data));
                            }
                            if(this.config.fileName == "dynamic_chart_holder") {
                                $("#graph_image").val(encodeURIComponent(data));
                            }
                            charts_remaining--; 
                            if (charts_remaining == 0) {
                                $("#export").submit();
                            }
                        });
                    });

我不确定该代码段是否有用,但这是我用来导出的内容。双方都没有表现出黑色的事实是真正让我失望的事实。如果我阻止3D视图,整个表面都是黑色的,您也可以在此图像中看到它

编辑#1(添加图表创建代码链接)

    CreatePie: function(holder, value_source){
    if($("#"+holder).length == 0)
        return;

    var chart;
    var legend;

    var chartData = $.parseJSON($("#"+value_source).val());

    chart = new AmCharts.AmPieChart();
    chart.export = {enabled:"true",
        libs: {
            path: "libraries/amcharts/amcharts/plugins/export/libs/"
        },
        backgroundColor: "transparent",
        backgroundAlpha: 0.3 ,
        menu:[],
        fileName:holder
    };
    chart.dataProvider = chartData;
    chart.titleField = "title";
    chart.valueField = "value";
    chart.colorField = 'color';
    chart.numberFormatter = {precision:2, decimalSeparator:".", thousandsSeparator:","};
    chart.labelRadius = -30;
    chart.radius = 80;
    chart.labelText = "";//"[[percents]]";
    chart.textColor= "#FFFFFF";
    chart.depth3D = 14;
    chart.angle = 25;
    chart.outlineColor = "#363942";
    chart.outlineAlpha = 0.8;
    chart.outlineThickness = 1;
    chart.startDuration = 0;

    legend = new AmCharts.AmLegend();
    legend.align = "left";
    legend.markerType = "square";
    legend.maxColumns = 1;
    legend.position = "right";
    legend.marginRight = 20;
    legend.valueText = "$[[value]]";
    legend.valueWidth = 100;
    legend.switchable = false;
    legend.labelText = "[[title]]:";
    chart.addLegend(legend);//, 'report_top_pie_legend');
    // WRITE
    chart.write(holder);
}

- 注意 - 当我粘贴它时,我决定显示颜色的内容,并注意到进入数据库的人在某些颜色之前和之后都按了返回键。这导致它们读作\ r \ n或\ t \ r \ n \ n。显然Amcharts在屏幕上创建图表时完全没有问题,但是当它出现时,那些不会过滤得那么好。删除那些额外的字符完全为我修好了!

抱怨并解决我自己的问题,但我希望这有助于将来的某些人。检查源代码中的真实颜色!=)

1 个答案:

答案 0 :(得分:1)

某些区域的颜色是例如:

\t\r\n#EA3444

#FFFFFF\r\n

AmCharts能够在屏幕上过滤掉没有问题,但是出口根本不喜欢它会导致它们变黑。为什么只在顶部,而不是侧面,我不确定。删除那些额外的字符修复它