3D 도넛 형 차트 작성 방법

Question

html로 3D 도넛 형 차트를 작성할 수 있는지 궁금합니다. 흥미로운 링크를 찾았습니다 here하지만 infortunatly 내가 아약스 요청을 클릭하여 클릭하면 링크 (또는 자바 스크립트 이벤트)를 추가해야합니다.

그런 일을 해 본 적이 있습니까? 답

Answer 1

살펴해야 예를 들어 그냥했습니다 :

http://jsfiddle.net/baQCD/3/embedded/result/

귀하의 경우에는

point: { 
    events: { 
     click: function(e) { 
      location.href = e.point.url; 
      e.preventDefault(); 
     } 
    } 
}, 

대신 :

핵심은 (말장난 의도) 데이터 배열의 각 행 (객체)의 URL 키를 추가하고, '클릭'이벤트 처리기에서 사용하는 것입니다 새 URL을 열면 아약스 요청을하거나 다른 작업을 수행 할 수 있습니다. 예제에서는 데이터와 제목을 조작하는 방법을 보여 줬습니다.

click: function(e) { 
    if (this.name == "Randomize!") { 
     sliceK = getRandomInt(0,chart.series[0].data.length-1); 
     chart.options.series[0].data[sliceK].y = getRandomInt(1,30); 
     chart = new Highcharts.Chart(chart.options); 
    } else if (this.name == "Link") { 
     location.href = this.url; 
     e.preventDefault(); 
    } else { 
     chart.setTitle(null,{text:this.name + " clicked"}); 
    } 
} 

즉시, 나는 매우 Highcharts처럼, 차트를 인쇄하거나 다운로드 할 수있는 기능, 그리고 전설을 클릭하여 데이터 (차트에서 제거)의 일부를 해제 할 수있는 기능이 개 기능을 볼 수 있습니다 .

---

이것은에 표시된 코드를 기반으로합니다 : 기존 라이브러리를 사용하여

이

http://birdchan.com/home/2012/09/07/highcharts-pie-charts-can-have-url-links/ http://www.highcharts.com/demo/3d-pie-donut/

Answer 2

내가 Google 시각화 차트와 함께 작업 한 지난 몇 개월 동안

등에 대한

덕분에 나는 당신이 찾고있는 정확하게 할 수있다 생각합니다. Here은 문서에 대한 링크입니다.

이렇게하면 도넛 형 차트가 표시됩니다 (3D로 만들 수 있는지 여부는 모르겠지만 사용자가 할 수 있다고 확신하지는 않지만). 사용자가 조각을 클릭하면 이벤트 핸들러를 추가 할 수 있습니다. 모양은 다음과 같습니다

내가보기 엔 차트를 시도하는 것이 좋습니다

, 나는 그들이 매우 유용하다는 것을 발견했다. 행운을 빕니다!

편집 : 사과드립니다. 도넛 형 차트 섹션을 다시 읽은 후에는 새로운 API가 아직 3D 도넛 형 차트를 지원하지 않는 것처럼 보입니다. 절대적으로 3 차원이어야합니까? 그렇지 않다면 이것은 여전히 ​​탁월한 선택입니다.

Answer 3

이것은 테스트 용으로 작성한 간단한 3 차원 계급 클래스입니다. 매우 간단합니다. 캔버스 변환을 zy 또는 zx 또는 yx 평면에 넣습니다. 캔버스를 사용합니다. setTransform 먼저 axionometric 클래스를 호출해야합니다. φ와 theta의 화각 get_bd는 x, y, z 좌표를 입력 할 수있는 함수이고 메서드는 b와 d 값을 가진 객체를 반환합니다. b는 화면의 x이며 d는 화면.

내가 추가 한 예는, 당신은 단지 아이디 canvasView으로 HTML에서 캔버스 태그를 넣어야 할

//3d Maths - Axonometric -- Artner Thorsten -- Austria -- Wiener Neustadt 

var context=document.getElementById("canvasView").getContext("2d"); 

function Axonometric (phi,theta) 
    { 
    var cosPHI=Math.cos(phi); 
    var sinPHI=Math.sin(phi); 
    var cosTHETA=Math.cos(theta); 
    var sinTHETA=Math.sin(theta); 

    this.cosPHI=cosPHI; 
    this.sinPHI=sinPHI; 
    this.cosTHETA=cosTHETA; 
    this.sinTHETA=sinTHETA; 

    this.phi=phi; 
    this.theta=theta; 
    } 

Axonometric.prototype.get_bd=function (x,y,z) 
    { 
    var b=y*this.cosPHI-x*this.sinPHI-500; 
    var d=x*this.cosPHI*this.cosTHETA+y*this.sinPHI*this.cosTHETA-z*this.sinTHETA+500; 
    return {b:b,d:d}; 
    } 

Axonometric.prototype.plane_zy=function (x) 
    { 
    context.setTransform (0,this.sinTHETA,-this.cosPHI,this.sinPHI*this.cosTHETA,500+x*this.sinPHI,500+x*this.cosPHI*this.cosTHETA); 
    } 

Axonometric.prototype.plane_zx=function (y) 
    { 
    context.setTransform (this.sinPHI,this.cosPHI*this.cosTHETA,0,this.sinTHETA,500+y*-this.cosPHI,500+y*this.sinPHI*this.cosTHETA); 
    } 

Axonometric.prototype.plane_yx=function (z) 
    { 
    context.setTransform (this.sinPHI,this.cosPHI*this.cosTHETA,-this.cosPHI,this.sinPHI*this.cosTHETA,500,500-z*this.sinTHETA); 
    } 

Axonometric.prototype.draw_axis=function (length) 
    { 
    var O=this.get_bd (0,0,0); 
    var X=this.get_bd (length,0,0); 
    var Y=this.get_bd (0,length,0); 
    var Z=this.get_bd (0,0,length); 
    context.save; 
    context.beginPath(); 
    context.textAlign="top"; 
    context.fillText ("X",-X.b,X.d); 
    context.moveTo (-O.b,O.d); 
    context.lineTo (-X.b,X.d); 
    context.strokeStyle="red"; 
    context.stroke(); 
    context.beginPath(); 
    context.fillText ("Y",-Y.b,Y.d); 
    context.moveTo (-O.b,O.d); 
    context.lineTo (-Y.b,Y.d); 
    context.strokeStyle="green"; 
    context.stroke(); 
    context.beginPath(); 
    context.fillText ("Z",-Z.b,Z.d); 
    context.moveTo (-O.b,O.d); 
    context.lineTo (-Z.b,Z.d); 
    context.strokeStyle="blue"; 
    context.stroke(); 
    context.restore(); 
    } 

// example 
var Viewer=new Axonometric (Math.PI/4, Math.PI/8); 
Viewer.draw_axis (400); 

Viewer.plane_yx (0); 
context.beginPath(); 
context.fillStyle="red"; 
context.fillRect (0,0,200,200); 

Viewer.plane_zx (0); 
context.beginPath(); 
context.fillStyle="lightgrey"; 
context.fillRect (0,0,200,-200); 

Viewer.plane_zy (0); 
context.beginPath(); 
context.arc (-100,100,100,0,2*Math.PI); 
context.fillStyle="black"; 
context.fill(); 

Answer 4

그것은 3D 아니지만, 다음을 참조하십시오 chart.js

Answer 5

쉬운 솔루션입니다. 귀하의 질문을 올바르게 이해하고 있다면 사용자가 슬라이스를 클릭하여 새 URL을 열 수 있기를 바랍니다.

"pie3d"유형을 설정 한 다음 시리즈에 "url"및 "target"을 포함하면 ZingChart에서이 작업을 수행 할 수 있습니다.

여기 어떻게 내가 해냈어 : 명랑의 대답에 확장

{ 
    "graphset":[ 
     { 
      "type":"pie3d", 
      "plot":{ 
       "slice":45 
      }, 
      "plotarea":{ 
       "margin-top":"35px" 
      }, 
      "series":[ 
       { 
        "text":"Apples", 
        "values":[5], 
        "url":"http://www.google.com", 
        "target":"_blank" 
       }, 
       { 
        "text":"Oranges", 
        "values":[8] 
       }, 
       { 
        "text":"Bananas", 
        "values":[22] 
       }, 
       { 
        "text":"Grapes", 
        "values":[16] 
       }, 
       { 
        "text":"Cherries", 
        "values":[12] 
       } 
      ] 
     } 
    ] 
} 

Answer 6

을, 당신은 또한 당신이 원하는 기능을 차트 상호 작용을 추적하고 전화를 ZingChart's API를 사용할 수 있습니다.

var ZCwindow; 
function openWindow() { 
ZCwindow = window.open("http://zingchart.com/docs/chart-types/pie/", "ZingChart Pie Charts"); 
}  

zingchart.node_click = function(e){ 
    if(e.value == 5) openWindow(); 
}; 

라이브 데모 here을 볼 수 있습니다.

저는 ZingChart 팀에 속해 있습니다. support@zingchart.com을 통해 지원을 요청할 수 있습니다.