2014-04-28 4 views
0

저는 ASP.NET과 C#을 사용하고 있습니다. 내가 본 모든 원형 차트 컨트롤은 각 카테고리에 하나의 값만 할당 할 수 있습니다.ASP.NET의 파이 차트?

하지만 내가하고 싶은 것은 제품마다 여러 값을 표시하는 원형 차트를 보여주는 것입니다.

ASP.NET에서 이러한 종류의 파이 차트를위한 솔루션이 있습니까?

+1

어떤 컨트롤이로 보았다이 하나의 차트에 표시 될 수있는 여러 정보가있는 경우 , 그리고 어떤 버전의 ASP.NET을 사용하고 있습니까? Telerik에는 차트 컨트롤이 있으며 제품은 꽤 강력합니다. – Tim

+1

나는 goole 차트를 볼 것을 제안합니다. 그들은 환상적이고 thei API는 그들과 잘 어울립니다. – Christos

+0

그래픽 Telerik 및 goole 차트의 기능을 연구하겠습니다. 감사합니다 덕분에 – userStack

답변

3

예, 당신은

Google Charts에 의해 구글 차트 도구는 사용하기 간단하고, 강력하고 무료로 사용을 할 수 있습니다. 대화 형 차트 및 데이터 도구가 풍부한 갤러리 인 을 사용해보세요.

Google Charts는 웹 사이트의 데이터를 시각화하는 완벽한 방법을 제공합니다. 간단한 선형 차트에서부터 복잡한 계층 적 트리 맵에 이르기까지 차트 갤러리는 즉시 사용할 수있는 많은 차트 유형을 제공합니다.

Google 차트를 사용하는 가장 일반적인 방법은 웹 페이지에 삽입하는 간단한 JavaScript 입니다. 일부 Google 차트 라이브러리를로드하면 차트 할 데이터를 나열하고 차트를 사용자 정의하는 옵션 인 을 선택하고 마지막으로 선택한 ID로 차트 개체를 만듭니다. 그런 다음 웹 페이지의 나중에이 ID로를 작성하여 Google 차트를 표시하십시오.

:

<html> 
    <head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 

     // Load the Visualization API and the piechart package. 
     google.load('visualization', '1.0', {'packages':['corechart']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.setOnLoadCallback(drawChart); 

     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 
     function drawChart() { 

     // Create the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Topping'); 
     data.addColumn('number', 'Slices'); 
     data.addRows([ 
      ['Mushrooms', 3], 
      ['Onions', 1], 
      ['Olives', 1], 
      ['Zucchini', 1], 
      ['Pepperoni', 2] 
     ]); 

     // Set chart options 
     var options = {'title':'How Much Pizza I Ate Last Night', 
         'width':400, 
         'height':300}; 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 

    <body> 
    <!--Div that will hold the pie chart--> 
    <div id="chart_div"></div> 
    </body> 
</html> 

미리보기 :

enter image description here

1

내가 제안 HighCharts (Demo)

그들은 작동되도록 구글 차트와 같은 캔버스에 의존하지 않는 이전 브라우저에서 차들이 샘플 코드의 유연한 구성 모델과 많음이

2

이 시도 .. 을 유

Check the demo 

DEMO

+0

DEMO에게 감사드립니다. 간단하고도 도움이되었습니다. – userStack