Question

我想知道是否可以在html中构建3d圆环图。我发现了一个有趣的链接here，但是当我点击启动ajax请求时，我需要添加链接（或javascript事件）。

你做过这样的事吗？

感谢您的回答

Answer 1

请参阅以下示例：

enter image description here

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

关键点（双关语）是为数据数组中的每一行（对象）添加一个url键，并在＆＃39; click＆＃39;中使用它。事件处理程序：

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

在您的情况下，您可以执行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"});
    }
}

您可以立即看到，我在Highcharts中非常喜欢的2个功能，打印或下载图表的功能，以及通过单击图例禁用部分数据（从图表中删除）的功能。

这基于以下代码：

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

Answer 2

这是我编写的一个简单的3D Axonometric类，用于测试，它非常简单，它将画布转换放入zy或zx或yx平面......它使用canvas setTransform 你首先必须用phi和θ来调用axionometric类的视角 get_bd是一个可以输入x，y，z坐标的函数，该方法返回一个带有b和d值的对象... b是屏幕的x，d是屏幕的y。

我有附加和示例，你只需要在带有id canvasView

的html中放置一个canvas标签

//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 3

使用现有库是一种简单的解决方案。如果我正确理解您的问题，您希望用户能够点击切片来打开新网址。

这可以通过设置“pie3d”类型在ZingChart中实现，然后在系列中包含“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]
                }
            ]
        }
    ]
}

Answer 4

扩展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团队的一员。您可以通过support@zingchart.com

与我们联系以获取帮助

Answer 5

在过去的几个月里，我一直在使用谷歌可视化图表，我认为它可能正是您正在寻找的。 Here是文档的链接。

这将为您提供一个圆环图（虽然我不确定您是否可以进行3-D，我相信您可以）并且您可以在用户点击切片时添加事件处理程序。这是它的样子：

enter image description here

我强烈推荐尝试图表，我发现它们非常有用。祝你好运！

编辑：我很抱歉，在重新阅读圆环图上的部分之后，新的API似乎还不支持3-D圆环图。它绝对必须是三维的吗？如果不是这仍然是一个很好的选择。

Answer 6

它不是3D，但你应该看看chart.js

如何建立一个3d圆环图

6 个答案: