[英]Elixir Phoenix LiveView Echart just vanishes (disappears)
很抱歉這篇長文,我試圖提供所有信息並解釋我已經嘗試過的內容。
問題:我將經典的鳳凰視圖放入實時視圖中。 雖然一切看起來都很好,但 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...
正如 Chris McCord 在 Github中提到的那樣,我必須將phx-update="ignore"
插入到圖表 html 中。 這解決了這個問題,讓我很高興。
干得好,也解決了我的問題
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.