简体   繁体   中英

How do I add and manipulate the values inside my pie chart?

I'm using http://d3pie.org/ to generate a pie chart for my web application. Now, I want to manipulate the value appearing on my chart. Currently, the values appearing have more than 4 decimals. For example, 10.35234234234 . I just want 10.3523 to appear.

Here's my current code:

function drawPie(id,from,to,C,formula){
    var subArray = getSubArray(C.table,from,to);
    if(Object.keys(subArray).length){
        var partials = createPartials(subArray, C.attributes);
        //console.log("partials -> ",partials);

        formula = formula.slice(1,-1);
        //console.log("formula ->" , formula);
        formula = formula.split(",");
        //console.log("formula ->" , formula);
        var cloneFormula = formula.slice(); 

        for( var i in partials){
            if(i.substr(0,1) == "$"){
                for(var j = 0; j< formula.length; j++){
                    formula[j] = replaceFunction(i,formula[j],partials[i]);
                }

            }

        }

        //console.log("replaced formula ->" , formula);

        var data = [];

        var isEmpty = true;
        for(var j = 0; j< formula.length; j++){
            var label = cloneFormula[j].split(/(?=[-+*\/])/)[0].split(".")[1];
            var temp = {};
            try{
                temp.value = eval(formula[j]);
            }catch(err){
                temp.value = 0;
            }
            temp.label = partials[label + ".name"];
            temp.color = partials[label + ".color"];
            data.push(temp);
            if(temp.value != 0){
                isEmpty = false;
            }
        }

        if(isEmpty){
            return true;
        }

        //console.log("data ->" , data);

        var pie = new d3pie(id, {
            "size": {
                "canvasHeight": 400,
                "canvasWidth": 800, //see defect 1418
                "pieOuterRadius": "88%"
            },
            "data": {
                "content": data
            },
            "labels": {
                "outer": {
                    "pieDistance": 100
                },
                "inner": {
                    "format": "value"
                },
                "mainLabel": {
                    "font": "verdana"
                },
                "percentage": {
                    "color": "#e1e1e1",
                    "font": "verdana",
                    "decimalPlaces": 0
                },
                "value": {
                    "color": "#e1e1e1",
                    "font": "verdana"
                },
                "lines": {
                    "enabled": true,
                    "color": "#cccccc"
                },
                "truncation": {
                    "enabled": true
                }
            },
            "effects": {
                "pullOutSegmentOnClick": {
                    "effect": "linear",
                    "speed": 400,
                    "size": 8
                }
            }
        });
        return false;
    }

    return true;
}

Can you help me try to modify the texts appearing inside my pie chart?

use the following to strip the number and then round it.

function strip(number) {
    return (parseFloat(number).toPrecision(4));
}

example

 var number = 3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679 function strip(number) { return (parseFloat(number).toPrecision(6)); } window.alert(strip(number)); 

For the generator you are using, go to the labels section, and under the label styles / Settings you will find the option for decimal places for percentage values. Enter the number of decimal places you would like to limit the labels to.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM