円グラフ：セグメント内のイメージをロードしてクリック

私は円グラフを作成しようとしています。私は多くの異なる図書館があることを知っていました。Chart.jsはそれが好ましいものの1つと思われるので、私はChart.jsを試しました。私はこのライブラリを使い続けることを決意していないので、私は自分の問題に対して他の解決策を開いています。円グラフ：セグメント内のイメージをロードしてクリック

私は、主に2つの問題を抱えて：

セクションにイメージをロードします。
選択したセクションに従って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のを与えることができる方法はありますか？クリックイベントの割り当て中に、それぞれのイベントを処理して属性を追加するようにしますか？

ありがとうございます。

出典

2016-03-30 RaDi

商用の図書館の図書館にご関心のある方は、ChartDirectorとお考えください。セクションラベルに画像を読み込むことができ、ラベルをセクションに配置することができます。また、画像を「壁紙」として使用して、セクションを塗りつぶすこともできます。セクションはマウスイベント（マウスがクリックされた場合など）に応答することもできます。いくつかの例のイメージは以下のとおりです。

ChartDirectorは、サーバー側で実行され、複数のプログラミング言語をサポートしています。あなたの参考のために、C＃の/ VBでのASP.NETフレームワークで上記のチャートのコードはである：

VB/C# Icon Pie Chart

VB/C# Texture Donut Chart

出典

2016-03-31 09:05:15 user3100235

ありがとうございます！残念なことに、私は商用の図書館を使うことはできませんが、そのようなものがあることを知っているのは良いことです。私はおそらくそれを将来使用するでしょう。私はPhotoshopでそれを作って、そこにイメージマップを使用することにしました。これは、私が見つけることができる最も速くて簡単な解決策でしたが、今はFoundationを使用している間にイメージマップを反応させる方法を見つける必要があります。 – RaDi

円グラフ：セグメント内のイメージをロードしてクリック

答えて

関連する問題