2016-08-31 7 views
0

値を動的に取得する円グラフがあります。 円の最初の値をlabel1に、もう1つの値をlabel2から取得したいとします。しかし、私はそれをどうやって行うのか分かりません。私を助けてください。どんな助けでも大歓迎です。ありがとうございました。ここで円のラベルの値を変更する

は、私がこれまでx'tian @

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) 

答えて

0

チェックこの例を持っているものです。

var dps = []; //dataPoints. 
 

 
var chart = new CanvasJS.Chart("chartContainer",{ 
 
    title :{ 
 
     text: "Dynamic Pie Chart with Labels" 
 
    }, 
 
    data: [{ 
 
    \t type: "pie", 
 
    \t dataPoints : dps 
 
    }] 
 
}); 
 

 
chart.render(); 
 
var labelIndex = 1; 
 
var yVal = 15; \t 
 
var updateInterval = 1000; 
 

 
var updateChart = function() { 
 
\t yVal = yVal + Math.round(5 + Math.random() *(-5-5)); 
 
    \t dps.push({y: yVal, label: "label"+labelIndex++}); 
 
    \t 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

をチェック
関連する問題