2017-10-27 11 views
2

私はObHighchartsBundleを使用して私のSymfonyプロジェクトでチャートを作成しています。ハイチャートシリーズのクリックイベントのパラメータを含むsymfonyルートを使用してください

ダッシュボード上に、与えられたデータへの(同じ)リンクを持つシリーズのチャートを正常に作成できました。私が達成したい何

enter image description here

は、各データ系列(注文状況)あなただけの場所とクリックした状態ごとに結果が表示されるように適用されたフィルタとの注文のリストへのリンクを作ることです。

たとえば、私が場所1(青い右端)の計画された注文をクリックすると、私は場所1の計画された注文だけが表示されている注文のリストを開きたいと思います。

これは、この出力に対して正しいデータをソートするコードです。

$data = $em->getRepository(Order::class) 
    ->getOrdersByStatusAndLocation(); 

$orderStatuses = []; 
$locations = []; 
foreach ($data as $row) { 
    if (!in_array($row['name'], $locations)) { 
     $locations[] = $row['name']; 
    } 

    $orderStatuses[$row['status']][$row['name']] = $row['number_of_orders']; 
} 

$result = []; 
foreach ($orderStatuses as $status => $value) { 
    $row = [ 
     'name' => $status, 
     'data' => array_fill(0, count($locations), 0) 
    ]; 

    foreach ($value as $location => $numOfOrders) { 
     $row['data'][array_search($location, $locations)] = $numOfOrders; 
    } 

    $result[] = $row; 
} 

そして、私の$resultのvar_dump()はこのようにしています。私$locationsはこのように見ていると

array (size=6) 
    0 => 
    array (size=2) 
     'name' => string 'planned' (length=7) 
     'data' => 
     array (size=2) 
      0 => int 2 
      1 => int 0 
    1 => 
    array (size=2) 
     'name' => string 'completed' (length=9) 
     'data' => 
     array (size=2) 
      0 => int 6 
      1 => int 1 
    2 => 
    array (size=2) 
     'name' => string 'denied' (length=6) 
     'data' => 
     array (size=2) 
      0 => int 9 
      1 => int 0 
    3 => 
    array (size=2) 
     'name' => string 'terminated' (length=10) 
     'data' => 
     array (size=2) 
      0 => int 4 
      1 => int 0 
    4 => 
    array (size=2) 
     'name' => string 'created' (length=7) 
     'data' => 
     array (size=2) 
      0 => int 1 
      1 => int 0 
    5 => 
    array (size=2) 
     'name' => string 'canceled' (length=8) 
     'data' => 
     array (size=2) 
      0 => int 4 
      1 => int 0 

:私はこのURLを作成した各セリエ上の私のClickイベントの

array (size=2) 
    0 => string 'Location 1' (length=10) 
    1 => string 'Location 2' (length=10) 

$orderListAbsoluteUrl = $this->generateUrl(
    'porder_index', 
    [], 
    UrlGeneratorInterface::ABSOLUTE_URL 
); 

$onClickFunc = new Expr("function() { 
    location.href = '". $orderListAbsoluteUrl ."' 
}"); 

私はこの$result sであり、このような私のチャートオブジェクトの内部変数を使用しています。

$plotOptions = [ 
    'stacking' => 'normal', 
    'cursor' => 'pointer', 
    'point' => [ 
     'events' => [ 
      'click' => $onClickFunc 
     ] 
    ] 
]; 

$ob = new Highchart(); 
$ob->chart->renderTo('barchart'); // The #id of the div where to render the chart 
$ob->chart->type('bar'); 
$ob->plotOptions->series($plotOptions); 
$ob->title->text('Orders per Location'); 
$ob->credits->enabled(false); // remove highcharts.com credits link 
$ob->xAxis->title(['text' => 'Locations']); 
$ob->xAxis->categories($locations); 
$ob->yAxis->title(['text' => 'Orders']); 
$ob->yAxis->allowDecimals(false); 
$ob->series($result); 

残っているのは、自分のリンク内にフィルタを追加することだけです。

ここでは、バックエンドにSonataを使用しています。そのため、フィルタは既に利用可能です。だから私は$resultを少し変更してフィルタの値を追加して、その部分を2番目のパラメータとして$orderListAbsoluteUrlに追加する必要があると思いますが、$resultがどのように見えるかはわかりません。

JavaScript部分の46行目から見ると、this fiddleという考えがあります。

私のURLのフィルタパラメータは次のようになります。私のURLは次のようなものになるように

$filters = [ 
    'status' => ['type' => null, 'value' => 'XXXXXX'], 
    'location' => ['type' => null, 'value' => 'YYYYYY'], 
]; 

$orderListAbsoluteUrl = $this->generateUrl(
    'porder_index', 
    ['filter' => $filters], 
    UrlGeneratorInterface::ABSOLUTE_URL 
); 

私は私の質問は十分に明確であり、私の状況で私を助けることができるそこに誰かがあることを願っています。私はそれを多く感謝します。前もって感謝します。

答えて

2

データポイントとしてハッシュを使用できると思いますので、その中にURLを設定して後でクリックイベントで使用することができます。

まず、結果配列を作成するときに各フィルタのURLを作成します。

$orderStatuses[$row['status']][$row['name']] = [ 
    // "y" as the axis point for HighCharts to use 
    'y'  => $row['number_of_orders'], 
    'url' => $urlGenerator->generate(
     'porder_index', 
     [ 
      'filters' => [ 
       'status' => ['type' => null, 'value' => $row['status']], 
       'location' => ['type' => null, 'value' => $row['name']], 
      ] 
     ], 
     UrlGeneratorInterface::ABSOLUTE_URL 
    ) 
; 

これは、それが今のポイントの属性であるとして

array (size=6) 
    0 => 
    array (size=2) 
     'name' => string 'planned' (length=7) 
     'data' => 
     array (size=2) 
      0 => 
      array (size=2) 
       'y' => int 2 
       'url' => string 'https://....?filters..' (length=X) 
      1 => 
      array (size=2) 
       'y' => int 0 
       'url' => string 'https://....?filters..' (length=X) 
    //... 

は、その後、あなたの plotOptions.series.point.events.click方法であなただけのそのURLを使用することができます..あなたは、次のような配列を得ることで終わる必要があります/これは関数に渡されます。系列データはほとんど変化とHighChartデモの一つの編集されたバージョンと

$plotOptions = [ 
    'stacking' => 'normal', 
    'cursor' => 'pointer', 
    'point' => [ 
     'events' => [ 
      'click' => new Expr("function() { 
       location.href = this.url; 
      }") 
     ] 
    ] 
]; 

Here is a fiddle。クリックするとurlというプロパティが通知されますが、その時点で何でもできます。

フロントエンドにURLを作成しようとするのではなく、このようにすると、ルートを変更するときにフロントエンドとバックエンドを同期させる必要がなくなります。 Symfonyが適切なデータを生成していることを確認してください。

ObHighChartsがデータポイント配列をオブジェクトに変換してもわからない場合は問題が発生する可能性があります。

関連する問題