很抱歉这篇长文，我试图提供所有信息并解释我已经尝试过的内容。
问题： 我将经典的凤凰视图放入实时视图中。虽然一切看起来都很好，但 echart 只是在完成绘画后就消失了。好像没有办法挽回了。
这是我的图表。如您所见，我尝试将它也与phx:update-event 挂钩。但这无济于事......
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....