Highcharts 图表图例显示状态存储的优雅解决方案

2024-01-14 18:37:16

前端解决方案

首先，我们需要在前端实现图例点击事件处理逻辑。当用户点击图例时，我们需要将点击的图例项的 ID 和当前的显示状态发送到后端。我们可以使用 AJAX 请求或 WebSocket 来实现这一点。

在前端，我们可以使用以下代码来实现图例点击事件处理逻辑：

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('highcharts-legend-item')) {
    const legendItemId = e.target.id;
    const legendItemState = e.target.classList.contains('highcharts-legend-item-hidden') ? 'hidden' : 'visible';

    // 使用 AJAX 请求或 WebSocket 将 legendItemId 和 legendItemState 发送到后端
  }
});

后端解决方案

在后端，我们需要接收前端发送过来的图例项 ID 和显示状态，并将其存储在数据库中。我们可以使用 MySQL、PostgreSQL 或 MongoDB 等数据库来实现这一点。

在后端，我们可以使用以下代码来接收前端发送过来的图例项 ID 和显示状态，并将其存储在数据库中：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $legendItemId = $_POST['legendItemId'];
  $legendItemState = $_POST['legendItemState'];

  // 连接数据库
  $conn = new mysqli('localhost', 'root', 'password', 'highcharts');

  // 将 legendItemId 和 legendItemState 插入数据库
  $stmt = $conn->prepare('INSERT INTO legend_item_states (legend_item_id, legend_item_state) VALUES (?, ?)');
  $stmt->bind_param('ss', $legendItemId, $legendItemState);
  $stmt->execute();

  // 关闭数据库连接
  $conn->close();
}

使用存储的显示状态

当用户下次进入页面时，我们需要从数据库中获取用户的图例显示状态，并将其应用到图表中。我们可以使用以下代码来实现这一点：

// 从数据库中获取用户的图例显示状态
const legendItemStates = getLegendItemStatesFromDatabase();

// 遍历图表的图例项
Highcharts.each(chart.legend.allItems, function(legendItem) {
  // 获取图例项的 ID
  const legendItemId = legendItem.userOptions.id;

  // 根据 ID 查找图例项的显示状态
  const legendItemState = legendItemStates[legendItemId];

  // 根据显示状态设置图例项的可见性
  if (legendItemState === 'hidden') {
    legendItem.hide();
  } else {
    legendItem.show();
  }
});