Canvasjs,允许单选数据点

时间:2017-09-12 12:26:58

标签: canvasjs

在饼图中,是否一次只能爆炸一个数据点?

现在它会爆炸(移出)饼图中所有点击的项目。

1 个答案:

答案 0 :(得分:0)

Ashutosh说,

你可以试试这个:

var chart = new CanvasJS.Chart("chartContainer",
	{
        
      data: [
      {
        type: "pie",//"doughnut"
        dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55},
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14}
        ]
      }
      ]
    });

chart.options.data[0].click = function(e){    
    var dataSeries = e.dataSeries;
    var dataPoint = e.dataPoint;
    var dataPointIndex = e.dataPointIndex;
    
    for(var i = 0; i < dataSeries.dataPoints.length; i++){
        if(i === dataPointIndex){
            dataSeries.dataPoints[i].exploded = true;            
        }else        
            dataSeries.dataPoints[i].exploded = false;            
    }
    
    
    chart.render();
};

 chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 200px; width: 100%;"></div>