如何建立一個3d環形圖

我不知道是否有可能在html中建立一個3d環形圖。我發現了一個有趣的鏈接here但infortunatly我需要添加鏈接（或JavaScript事件）點擊啓動ajax請求。如何建立一個3d環形圖

你有沒有做過這樣的事情？

謝謝您的回答

來源

2014-04-23 nodibb

您可以下載一個圖表庫來爲您做這件事，或者您花費接下來的兩個月從頭開始編寫它，也就是說，如果您知道您'在做什麼？ – adeneo

你需要兩個月嗎？ ;）） –

@ ThorstenArtner'Austria' - 可能不會，但在一個畫布中創建3D東西不會在一個小時內完成。 – adeneo

請參見下面的比如我剛纔提出：

enter image description here

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

的關鍵點（雙關語意）是添加的數據陣列中的每一行（對象）的URL鍵，並在「點擊」事件處理程序使用它：

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

在你的情況，而不是打開一個新的url，你可以做你的Ajax請求或做其他任何事情。在我的例子中，我展示瞭如何操作數據和標題。

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"}); 
    } 
}

您可以立即看到，2個功能，我很喜歡在Highcharts，打印或下載圖表的能力，並通過點擊傳說禁用數據（從圖表中移除）的一部分的能力。

這是基於中所示的代碼：

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

來源

2014-04-23 21:12:50 dvb

偉大的你真的幫助我。謝謝 – nodibb

@nodibb不客氣！回答改進:) – dvb

因爲我一直在與谷歌可視化的圖表在過去的幾個月裏，我想這可能是你在尋找什麼。 Here是鏈接到文檔。

這會給你一個甜甜圈圖表（儘管我不知道你是否可以製作3D圖，我相信你可以），並且你可以添加事件處理程序，以便當用戶點擊切片時。這裏是什麼樣子：

enter image description here

我強烈建議您嘗試圖表，我發現他們格外有用。祝你好運！

編輯：我很抱歉，重新閱讀甜甜圈圖表上的部分後，它顯示新的API還不支持3D環形圖表。它絕對必須是三維的嗎？如果不是，這仍然是一個很好的選擇。

來源

2014-04-23 20:12:23 DerStrom8

Thxs derstrom8我也看到了這個偉大的圖書館，但不幸的是它真的需要有一個3D效果（特別thx我wedesigner :)） – nodibb

好吧，那很好知道。我希望Google能儘快添加該選項。可視化API仍然非常新，所以他們仍然在進行改進。祝你好運，我希望你能弄明白！ – DerStrom8

另一種選擇是將不可見的div放在您原始帖子中鏈接到的圖表的餅圖片上。然後你可以讓div可點擊。這會起作用嗎？ – DerStrom8

這是一個簡單的3D軸測圖類，我爲測試而寫，它非常簡單，它將畫布變換放入zy或zx或yx平面中......它使用畫布setTransform 您首先必須調用axionometric類phi和theta視角 get_bd是一個函數，您可以輸入x，y，z座標，並且該方法返回帶有b和d值的對象... b是屏幕的x，d是屏幕。

我已經附加和例子，你必須把畫布標記在HTML ID爲canvasView

//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();

來源

2014-04-23 20:44:27

恐怕我對Web開發不夠熟悉，無法理解你在ons拍攝中的代碼，但我需要花時間來修補它。坦克這個提議 – nodibb

這不是3D，但你應該看看chart.js

來源

2014-04-23 20:45:26 pmrotule

使用現有的庫是一個簡單的解決方案。如果我正確理解您的問題，您希望用戶能夠點擊切片以打開新的URL。

這可以通過在ZingChart中設置一個「pie3d」類型，然後在系列中包含「url」和「target」來實現。

我是這樣做的：

{ 
    "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] 
       } 
      ] 
     } 
    ] 
}

來源

2014-05-27 18:22:46 Merrily

擴展在歡天喜地的回答，您還可以使用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團隊的一員。您可以通過[email protected]與我們聯繫尋求幫助。

來源

2014-05-27 18:30:52 RockinSocks

請在你的答案中明確表示你是ZingCharts。 – ChrisF

如何建立一個3d環形圖

回答

相關問題