0

Web サイトにプロファイル ページがあり、下のリンクのような中空の円グラフが必要です。これにより、プロファイルの完了率を表示したいと考えています。パーセンテージが中央に表示され、円グラフは 2 色のみになります。

画像のリンクにアクセスしてください http://www.telerik.com/ClientsFiles/392888_hollow.png

私がしたこと、私はGoogle Chartsを使用しました。コードは次のとおりです。

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Profile');
    data.addColumn('number', 'Percentage');
    data.addRows([
      ['Profile Complete', 3],
      ['Profile Incomplete', 1]
    ]);

    // Set chart options
    var options = {'title':'Profile Complete',
                   'width':400,
                   'height':300};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

<!--Div that will hold the pie chart-->
<div id="chart_div"></div>

しかし、私が得ているのは完全な円グラフであり、中空のものではないので、中空の円グラフを作成するのを手伝ってくれる人はいますか? データを計算するアルゴリズムがあるので、ダミー データを使用できます。

どんな種類の助けや指導も歓迎します。

ありがとうございました...

4

2 に答える 2

0

これは、画像を取得するために画像 URL を使用し、その画像をコードの「img」タグで使用しているという事実を含む、私の質問に対する回答です。

訪問: https://chart.googleapis.com/chart?cht=pc&chco=FFFFFF,FFFFFF,FFFFFF,FFFFFF,74D3EF|EDEDED&chd=t:-1|-1|-1|-1|52,48&chs=122x122&chp= 4.7

必要な出力が得られます。URL をいじってみてください。正直なところ、これはハックであり、適切な解決策ではありません。Google は URL で使用するパイホール プロパティを提供していないからです。

ご質問は大歓迎です。

ありがとうございました。

于 2013-08-27T15:08:07.347 に答える