Elixir Phoenix LiveView Echart消失（消失）

Question

很长的帖子，很抱歉，我试图提供所有信息并解释我已经尝试过的内容。

问题：我将经典的凤凰视图放入了实时取景。尽管一切似乎都很好，但是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()不会not使图形重新出现，但打印出updating the graph...。

Answer 1

[正如Chris McCord提到的on Github，我必须将phx-update="ignore"插入到HTML图形中。这解决了问题，让我感到非常高兴。