Elixir Phoenix LiveView Echart 刚刚消失（消失）

Question

抱歉这么久 post，我尝试提供所有信息并解释我已经尝试过的内容。

问题： 我将经典的凤凰视图放入实时视图中。虽然一切看起来都很好，但 echart 刚完成绘制就消失了。好像没办法找回来了。

这是我的图表。如您所见，我也尝试将其挂接到 phx:update 事件。但这没有帮助... graph.js:

updateGraph = function() {
  console.log("updating the graph...")
  let device_name = document.getElementById('device-name').value;
  let series_data = document.getElementById('history_chart_data').dataset.series;

  series_data = JSON.parse(series_data);

  // draw chart
  window.myChart.setOption({
    [chart options omitted]
  });
}

initGraph = function() {
  // initialize echarts instance with prepared DOM
  window.myChart = echarts.init(document.getElementById('history_chart'), 'light');
  updateGraph();
}

document.addEventListener('DOMContentLoaded', initGraph, false);
document.addEventListener('phx:update', updateGraph);

这里是html(graph.html.leex)。如您所见，为了安全起见，我什至将数据放在另一个 div 中。

    <%= if assigns[:ttnmessages] do %>
      <script src="<%= Routes.static_path(DatabaumWeb.Endpoint, "/js/jcharts.min.js") %>"></script>
      <script src="<%= Routes.static_path(DatabaumWeb.Endpoint, "/js/moment.min.js") %>"></script>
      <script type="text/javascript" src="<%= Routes.static_path(DatabaumWeb.Endpoint, "/js/graph.js") %>"></script>


      <div id="history_chart" style="width: 100%;height:50vh;"></div>
      <div id="history_chart_data" data-series="<%= dataSeries(@ttnmessages, @graph_data) %>"></div>
    <% end %>

还有直播

defmodule AppWeb.ConsoleLive do
  use Phoenix.LiveView
  alias AppWeb.ConsoleView
  alias App.API

  def render(assigns) do
    Phoenix.View.render(ConsoleView, "index.html", assigns)
  end


  @doc """
  Graph
  """
  def mount(session = %{params: %{"hardware_serial" => hardware_serial, "graph" => form}, user: current_user}, socket) do
    AppWeb.Endpoint.subscribe("TtnMessages")
    if connected?(socket), do: :timer.send_interval(1000, self(), :tick)

    ttnmessages = API.list_ttnmessages(hardware_serial, form)
    message = List.last(ttnmessages)
    devices = API.list_message_devices(current_user)
    device = API.get_device_by_serial(hardware_serial);
    graph_data = form
                 |> Enum.reject(fn {_k, v} -> v != "true" end)
                 |> Enum.map(fn {k, _v} -> k end)
                 |> Enum.to_list()

    session = Map.merge(session, %{
      devices: devices,
      ttnmessages: ttnmessages,
      message: message,
      device: device,
      graph_data: graph_data,
      message_ago: message_ago(message.inserted_at)
    })

    {:ok, assign(socket, session)}
  end

 #[Omitted two other mount methods, which are not called in this case]

  # updates the info when the device has last been seen.
  def handle_info(:tick, socket) do
    message = socket.assigns[:message]
    {:noreply, assign(socket, message_ago: message_ago(Map.get(message, :inserted_at)))}
  end

  #new message arrives, this is not responsible for my issue because this happens max. once per minute
  def handle_info(%{event: "new", payload: %{message: message}} = a, socket) do
    message = update_message(message, socket.assigns.message)
    devices = Enum.map(socket.assigns.devices, &update_device(&1, message))

    {:noreply, assign(socket, devices: devices, message: message)}
  end

  def handle_info(_broadcast, socket), do: {:noreply, socket}


  #  update the message if necessary
  defp update_message(message = %{hardware_serial: hs}, socket_message = %{hardware_serial: hs}), do: message
  defp update_message(_message, socket_message), do: socket_message


  defp update_device(_device= %{hardware_serial: hs}, _message = %{hardware_serial: hs}), do: API.get_device_by_serial(hs)
  defp update_device(device, _message), do: device

  defp message_ago(nil), do: "never"
  defp message_ago(date) do
    {:ok, ago} = Timex.Format.DateTime.Formatters.Relative.relative_to(date, Timex.now(), "{relative}", "de")
    ago
  end

end

ttnmessages 从未更新过。 ttnmessage 很少更新。滴答不负责，我试过禁用它。

消失前的图表（页面加载期间）之后有趣的是，当我尝试编辑元素 css 时，例如添加红色背景颜色，当滴答声命中时。

从浏览器控制台调用 window.updateGraph() 不会使图表重新出现，但会打印出 updating the graph....

Answer 1

正如 Chris McCord 提到的 on Github，我必须将 phx-update="ignore" 插入图表 html。这解决了问题，让我很高兴。

Elixir Phoenix LiveView Echart 刚刚消失（消失）

Elixir Phoenix LiveView Echart just vanishes (disappears)

elixir

phoenix-framework

echarts

phoenix-live-view