Question

我有一个饼图，可以动态获取值。我想将pie的第一个值设为label1，另一个值来自label2。但我不知道该怎么做。请帮我。任何帮助将非常感激。谢谢。

这是我到目前为止的内容

 var pie = 0;
    function changepie(val) {
        pie = val;
    }

 <div id="chartContainer" style="height: 115px; width:100%;"></div>

 window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer",
            {
                animationEnabled: true,
                animationDuration: 1300,
                backgroundColor: "transparent",
                legend: {
                    verticalAlign: "bottom",
                    horizontalAlign: "center"
                },
                data: [
                {

                    indexLabelFontSize: 10,
                    indexLabelFontWeight: "bold",
                    indexLabelFontFamily: "Helvetica",
                    indexLabelPlacement: "outside",
                    indexLabelLine: "none",
                    radius: "100%",
                    type: "pie",

                    toolTipContent: "{y} - <strong>#percent%</strong>",
                    dataPoints: [
                        { y: pie, legendText: "", 
                                    label: pie + "%", 
                                    indexLabelLineColor: "#1dc7ea", 
                                    indexLabelFontColor: "#1dc7ea", 
                                    exploded: true, 
                                    indexLabelPadding: "5px", 
                                    },
                        { y: avory, legendText: "", 
                                    label: avory, 
                                    indexLabelLineColor: "#FF4A55", 
                                    indexLabelFontColor: "#FF4A55" 
                                    }

                    ]
                }
                ]
            });
            chart.render();
        }

 Label1.Text = Session("val1").ToString
        Label2.Text = Session("val2").ToString
        ClientScript.RegisterClientScriptBlock(Me.[GetType](), "Script", "changepie(" + Label1.Text + ");", True)
        ClientScript.RegisterClientScriptBlock(Me.[GetType](), "Script", "changeavory(" + Label2.Text + ");", True)

Answer 1

@ x'tian，

检查此示例。

var dps = [];   //dataPoints. 

var chart = new CanvasJS.Chart("chartContainer",{
    title :{
        text: "Dynamic Pie Chart with Labels"
    },
    data: [{
    	type: "pie",
    	dataPoints : dps
    }]
});

chart.render();
var labelIndex = 1;
var yVal = 15;	
var updateInterval = 1000;

var updateChart = function () {
	yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
   	dps.push({y: yVal, label: "label"+labelIndex++});
   	chart.render();
};

setInterval(function(){updateChart()}, updateInterval);

<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

选中此jsfiddle

更改饼图标签值

1 个答案: