web-dev-qa-db-ja.com

Fivestar Noteのチャートを作成する

Drupal 7および Fivestar を使用しています。

ノートを円グラフの形式で表示してみます。

ノート（=評価）が10で5、2の場合、次のタイプのサークルが必要です。

enter image description here

私は Charts （Google Chartsをチャートエンジンとして）と Google chart Tools を試しましたが、（Views統合を使用して）希望どおりに取得できません。

Googleグラフツールでは この問題 （値は1つしか表示されません）があり、グラフでは何も表示されません（集計ではなく、ビューの5つ星フィールドのみ）。

あなたは解決策を知っていますか？

表示したいデータの表： enter image description here

7entitiesratingcharts
3
Hgfdsoiu

解決策1-グラフを使用して円グラフを作成する

あなたの質問のサンプル画像は、私にとっては円グラフのようではなく、むしろGaugeグラフのように見えます。とにかく Charts モジュールを使用して円グラフを作成したい場合は、- this feature request （これにより、「ライブラリ固有のオプション」を渡すことができます。 ）。 その中のコメント＃9 （Googleチャートをレンダリングエンジンとして使用して）必要なパッチが含まれています。

そのパッチを適用した後、作成しようとしているグラフに対応する特定のオプションをGoogleグラフのグラフ作成エンジンに渡すことができます。

パッチを適用するだけでは不十分な場合は、 ビューUIを使用してチャートを作成する手順 の「ボーナスヒント」に記載されている内容をお勧めします。

データを設定した後、「表」表示から始めてそれをグラフ表示に変換する方が簡単な場合があります。最初に表に配置すると、グラフの結果を簡単に視覚化できます。

つまり、グラフを作成する前に、表形式のバージョンで正しいデータが表示されていることを確認してください。

解決策2-チャートを使用してゲージチャートを作成する

質問のサンプル画像はGaugeチャートのように見えます。 チャートのサポート に関する チャート の問題をご覧ください。この問題の コメント＃4 に含まれているパッチを適用すると、Charts APIを使用してそのようなゲージチャートを作成できるようになります（チャートエンジンとしてGoogleチャートを使用）。ところで、 この特定のSimplyTest.Me リンクを使用することもできます（このパッチが有効になっています）。

これは、自分の環境で（そのパッチを使用して）作成したこのような2つのチャートのサンプルです。

enter image description here


最初の（左）グラフは5.7のような評価を表示するものであり、2番目（右）のグラフは7.2（両方の評価が10のスケール）のような評価を表示するものです。注意：ゲージチャートでは、下部の丸められた値6（および7）ではなく、5.7（および7.2）の値を表示する特定のオプションを（まだ）見つけていません。ただし、グラフ内の（赤い）ポインターは、実際の値を正しく反映しているようです。

私のPHP上記の2ゲージチャートをレンダリングするためのコードは次のようになります（私が使用したさまざまなオプションは自己説明的であるはずです）：

<?php

 $chart = array(
    '#type' => 'chart',
    '#chart_type' => 'gauge',
    '#chart_library' => 'google',
    '#title' => t('Gauge Chart'),
    '#min' => 0,
    '#max' => 10,
    '#width' => 300,
    '#height' => 300,
    '#greencolor' => '#00AA10',
    '#greenfrom' => 0,
    '#greento' => 5,
    '#redfrom' => 8,
    '#redto' => 10,
    '#redcolor' => '#FF3333',
    '#yellowfrom' => 5,
    '#yellowto' => 8,
    '#yellowcolor' => '#66BB88',
    '#minorticks' => 5,
  );


echo "<p>Left Gauge chart (= Rating 1) : 5.7 / 10 ; Right Gauge chart (Rating 2) : 7.4 / 10 </p>";

  $chart['rating1'] = array(
    '#type' => 'chart_data',
    '#title' => t('Rating 1'),
    '#data' => array(array('Rating1', 5.7)),
  );

  $chart['rating2'] = array(
    '#type' => 'chart_data',
    '#title' => t('Rating 2'),
    '#data' => array(array('Rating2', 7.2)),
  );

  $example['chart'] = $chart;

  return drupal_render($example);
?>

上記のコードをPHPフィルターの使用を許可するコンテンツタイプの本文に貼り付け、インターネット接続が機能している（Google Chartsを使用するための前提条件）と想定している）場合、同様の結果が得られるはずです。独自の環境でチャートを作成します（前述のパッチも有効にした場合）。

Charts APIを使用する上記のソリューションでは、「リライト結果」を使用して、表形式のビュー表示に追加の列を追加するために同じ手法を使用できるはずです。この場合、実際の値も参照しますScore各ビュー結果行の列（スコア列の右側のどこかに1つのゲージグラフが表示されるようにするため）。

開示：私はco ---- Charts モジュールのメンテナーです。

1
Pierre.Vriens