gpt4 book ai didi

Elixir Phoenix LiveView Echart 消失(消失)

转载 作者:行者123 更新时间:2023-12-04 20:26:52 28 4
gpt4 key购买 nike

抱歉,这篇文章很长,我试图提供所有信息并解释我已经尝试过的内容。

问题:
我将经典的 Phoenix View 放入实时 View 中。虽然一切看起来都很好,但 echart 一完成绘制就消失了。好像没有办法找回来。

这是我的图表。如您所见,我也尝试将其与 phx:update 事件 Hook 。但这无济于事...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 很少更新。滴答声不负责任,我尝试禁用它。

消失前的图表(页面加载期间)
The graph just before it vanishes
之后
And afterwards
有趣的是,当我尝试编辑元素 css 时,例如添加一个红色的背景颜色,当刻度点击时。

从浏览器控制台调用 window.updateGraph() 确实 而不是 使图形重新出现,但会打印出 updating the graph...

最佳答案

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

关于Elixir Phoenix LiveView Echart 消失(消失),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58660655/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com