Question

我一直试图创建一个饼图。我看到有很多不同的库，我尝试过Chart.js，因为它似乎是首选的库之一。我不打算继续使用这个库，所以我对任何其他问题的解决方案持开放态度。

我有两个主要问题：

将图像加载到某个部分。
使片段可以点击，以便根据所选部分显示div。

这是我的 HTML

<body>
  <canvas id="mycanvas"></canvas>
</body>

这是我的 JS

<script>
    $(document).ready(function(){
        var ctx = $("#mycanvas").get(0).getContext("2d");

        var data = [
            {
                value: 51,
                color: "cornflowerblue",
                highlight: "lightskyblue",
                label: "Corn Flower Blue"           
            },
            {
                value: 51,
                color: "lightgreen",
                highlight: "yellowgreen",
                label: "Lightgreen"
            },
            {
                value: 51,
                color: "orange",
                highlight: "darkorange",
                label: "Orange"
            },
            {
                value: 51,
                color: "beige",
                highlight: "bisque",
                label: "Beige"
            },
            {
                value: 51,
                color: "aliceblue",
                highlight: "cadetblue",
                label: "AliceBlue"
            },
            {
                value: 51,
                color: "brown",
                highlight: "chocolate",
                label: "Brown"
            },
            {
                value: 51,
                color: "darkviolet",
                highlight: "deeppink",
                label: "DarkViolet"
            }
        ];

        var piechart = new Chart(ctx).Pie(data);

    });
</script>

有什么办法可以给每个段提供一个backgroundImage吗？就像浏览每一个并添加属性同时分配点击事件一样？

谢谢。

Answer 1

如果您对商业图表库持开放态度，您可以考虑ChartDirector。它可以将图像加载到部分标签中，标签可以放在部分上。它还可以将图像用作＆＃34;壁纸＆＃34;填写部分。这些部分也可以响应鼠标事件（例如鼠标点击）。一些示例图像是：

ChartDirector在服务器端运行，支持多种编程语言。供您参考，C＃/ VB中ASP.NET框架中上述图表的代码位于：

VB / C# Icon Pie Chart

VB / C# Texture Donut Chart

饼图：在段中加载图像并单击

1 个答案: