[已解决]html5 左边菜单栏保持展开或者关闭的状态

kerln888 · 发表于 5 小时前

FishC 发表于 2026-3-1 16:16
对于共享 x 轴、独立 y 轴的柱线组合图，使用 Plotly.restyle 更新数据时，需要确保为每个轨迹指定正确 ...

@FishC 我的意思是这样更新数据以后，y和y2的就不独立了。本来y的坐标是0-80，y2是-100-40。更新数据以后y、y2坐标一样了，都是-150-0

FishC · 发表于 5 小时前

kerln888 发表于 2026-03-01 16:26
FishC 发表于 2026-3-1 16:16
对于共享 x 轴、独立 y ...

FishC 回复：
抱歉，理解有误。你的问题是 用 restyle 更新数据后，双 Y 轴的范围被统一了，破坏了原来的独立性。这是因为默认情况下，更新数据会触发坐标轴范围的重新计算，而 Plotly 有时会尝试“统一”两个 Y 轴的范围（尤其是当数据值差异较大时）。

解决方案：在 restyle 时，明确指定每个轨迹对应的 yaxis。

例如，假设你的图表初始配置如下：

trace1 = dict(x=[...], y=[...], type='bar', yaxis='y')
trace2 = dict(x=[...], y=[...], type='scatter', yaxis='y2')
layout = dict(
yaxis=dict(title='主Y轴'),
yaxis2=dict(title='次Y轴', overlaying='y', side='right')
)

复制代码

更新数据时，需要分别为两个轨迹指定其对应的 yaxis：

# 更新第一个轨迹的数据（对应主Y轴 yaxis）
Plotly.restyle(gd, {'y': [new_y1_data]}, 0)
# 更新第二个轨迹的数据（对应次Y轴 yaxis2）
Plotly.restyle(gd, {'y': [new_y2_data]}, 1)

复制代码

如果更新后坐标轴范围仍然不对，可以 在更新数据后，手动设置每个 yaxis 的范围：

Plotly.relayout(gd, {
'yaxis.range': [0, 80],
'yaxis2.range': [-100, 40]
})

复制代码

这样就能确保更新数据后，两个 Y 轴依然保持各自独立的范围。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

kerln888 · 发表于 5 小时前

@FishC plotlyjs，如何通过document.get获取plotly

FishC · 发表于 5 小时前

kerln888 发表于 2026-03-01 16:57
@FishC plotlyjs，如何通过document.get获取plotly

在Plotly.js中，可以通过DOM元素的data属性获取图表数据。以下是几种方法：

方法1：通过ID获取

javascript
// 假设图表渲染在id为'myPlot'的元素中
const plotDiv = document.getElementById('myPlot');
const chartData = plotDiv.data; // 获取数据
const chartLayout = plotDiv.layout; // 获取布局

复制代码

方法2：通过类名获取

javascript
// Plotly默认会添加'js-plotly-plot'类
const plotElements = document.getElementsByClassName('js-plotly-plot');
if (plotElements.length > 0) {
const firstPlot = plotElements[0];
console.log(firstPlot.data);
}

复制代码

方法3：使用Plotly的API方法

javascript
// 获取特定div的完整图表对象
const plotDiv = document.getElementById('myPlot');
const fullPlotlyObj = Plotly.getPlotly(plotDiv);
// 或者直接访问数据
const data = plotDiv._fullData; // 完整数据
const layout = plotDiv._fullLayout; // 完整布局

复制代码

重要说明：

确保图表已经渲染完成后再获取数据
data属性包含系列数据，layout包含布局配置
某些属性可能需要访问_fullData或_fullLayout获取完整信息
不同Plotly.js版本可能略有差异

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

kerln888 · 发表于 10 分钟前

@FishC plotlyjs代码如下。我想点击plot图表，输出myPlot的名字，但是输出是undefined。我应该做？？
var myPlot = document.getElementById('myDiv'),
x = [1, 2, 3, 4, 5],
y = [10, 20, 30, 20, 10],
data = [{x:x, y:y, type:'scatter',
         mode:'markers', marker:{size:20}
         }],
layout = {hovermode:'closest',
            title: {text: 'Click on Points'}
   };

Plotly.newPlot('myDiv', data, layout);

myPlot.on('plotly_click', function(){
console.log(this.name);
});

FishC · 发表于 9 分钟前

kerln888 发表于 2026-03-01 21:55
@FishC plotlyjs代码如下。我想点击plot图表，输出myP ...

你的代码中，myPlot 是一个 DOM 元素（通过 document.getElementById('myDiv') 获取），它没有 name 属性，所以点击时输出 undefined。要解决这个问题，你需要明确想输出什么名字。以下是两种常见情况：

情况1：想输出数据系列的名字
在数据对象中添加 name 属性，然后在点击事件中通过事件参数获取。

修改后的代码示例：

var myPlot = document.getElementById('myDiv'),
x = [1, 2, 3, 4, 5],
y = [10, 20, 30, 20, 10],
data = [{
x: x,
y: y,
type: 'scatter',
mode: 'markers',
marker: { size: 20 },
name: '我的数据系列' // 添加数据系列名字
}],
layout = {
hovermode: 'closest',
title: { text: 'Click on Points' }
};
Plotly.newPlot('myDiv', data, layout);
myPlot.on('plotly_click', function(eventData) {
if (eventData && eventData.points && eventData.points.length > 0) {
var point = eventData.points[0];
var traceName = point.data.name; // 获取数据系列的名字
console.log(traceName); // 输出：'我的数据系列'
}
});

复制代码

情况2：想输出图表div的ID
直接使用 this.id 获取DOM元素的ID。

代码示例：

myPlot.on('plotly_click', function() {
console.log(this.id); // 输出：'myDiv'
});

复制代码

选择适合你需求的方法即可。如果还有其他问题，请继续提问！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册