[英]Elixir Phoenix LiveView Echart just vanishes (disappears)
Sorry for the long post, I tried to give all the information and explain what I have already tried.很抱歉这篇长文,我试图提供所有信息并解释我已经尝试过的内容。
Problem: I put a classic phoenix view into a liveview.问题:我将经典的凤凰视图放入实时视图中。 While everything seems fine, the echart just vanishes as soon as it's finished painting.
虽然一切看起来都很好,但 echart 只是在完成绘画后就消失了。 There seems to be no way to get it back.
好像没有办法挽回了。
Here is my graph.这是我的图表。 As you can see, I try to also hook it to the
phx:update
-event.如您所见,我尝试将它也连接到
phx:update
-event。 But that doesn't help... graph.js
:但这无济于事......
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);
Here is the html ( graph.html.leex
).这是 html (
graph.html.leex
)。 As you can see I even put the data in another div, just to be safe.如您所见,为了安全起见,我什至将数据放在另一个 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 %>
And the liveview还有直播
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
The ttnmessages are never even updated. ttnmessages 甚至从未更新。 The ttnmessage is updated rarely.
ttnmessage 很少更新。 The tick is not responsible, I tried disabling that.
滴答声不负责任,我尝试禁用它。
The chart before it vanishes (during page load)消失前的图表(页面加载期间)
and afterwards
之后
The interesting thing is that when I try to edit the element css and eg add a red background color, that when the tick hits.
有趣的是,当我尝试编辑元素 css 并添加红色背景颜色时,当滴答声响起时。
Calling window.updateGraph()
from the browser console does not make the graph reappear, but prints out updating the graph...
.从浏览器控制台调用
window.updateGraph()
不会使图形重新出现,但会打印出updating the graph...
Nice work, also solve my issues干得好,也解决了我的问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.