Javascript 在highchart系列的单击事件中使用带参数的symfony路由

在我的Symfony项目中，我正在使用来制作图表

现在，我成功地在仪表板上创建了一个图表，其中包含与给定数据（相同）链接的系列

我想要完成的是使每个数据系列（订单状态）成为指向订单列表的链接，并应用过滤器，以便您只看到每个位置的结果和单击的状态

比如,；如果我单击位置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

s var_dump（）如下

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

$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);

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

我的

$locations

如下所示：

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

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

对于我在每个系列上的点击事件，我创建了这个url

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

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

我在我的图表对象中使用这个

$result

s和

$onClickFunc

变量，如下所示

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

$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);

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

剩下的就是在我的链接中添加过滤器

现在，我正在为后端使用，因此过滤器已经可用。所以我想我只需要稍微修改一下我的

$result

s来添加过滤器的值，然后在我的

$orderListAbsoluteUrl

中添加数组的这一部分作为第二个参数，但我不知道我的

$result

应该是什么样子

如果从JavaScript部分的第46行看，我有一个想法

我知道我的URL的过滤器参数应该是这样的

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

$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);

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

这样我的URL就会变成这样：

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

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

---

我希望我的问题足够清楚，并且有人可以帮助我解决我的问题。我会非常感激的。提前谢谢。

我认为您可以使用散列作为数据点，而不仅仅是一个数字，这样您就可以在其中设置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，因为它现在是传递给函数的point/this的一个属性

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

在HighChart演示的编辑版本中，系列数据发生了一些变化。当您单击时，它会提醒
url
属性，但此时您可以对其执行任何操作

这样做而不是试图在前端创建url的好处是，在进行任何路由更改时，不必确保前端和后端同步，只需确保Symfony生成正确的数据即可

注意如果ObHighCharts不将数据点数组转换为对象，可能会出现问题，但我不能确定