我正在一个空间中使用 Plotly.js，我需要动态更改绘图中加载的数据。
我采取的方法是使用从 json 中获取的新数据重新绘制绘图 div。将根据输入框选择数据，输入框将从 json 中选择数据。
我在下面的代码片段中包含了一个基本示例。
如何重现:
- 将左侧选择器更改为“周”。
- 然后将右侧选择器更改为“利润”。
- 然后将左侧选择器更改回“月份”。
此后，即使在 newPlot 调用之前存在正确的数据，该特定组合的绘图也不会显示。
但是，如果您重新加载代码片段，然后最初循环浏览右侧框中的所有选项并重复上述过程。它将按预期工作。
为什么只有按此顺序进行选择时才会发生这种情况？
var RevenueTrend = class {
constructor(e) {
this.data = e;
this.periodicitySelector = document.getElementById('revenue_trend_periodicity');
this.measureSelector = document.getElementById('revenue_trend_measure');
// set default data
this.#a('monthly', 'revenue');
// set callbacks for boxes
this.periodicitySelector.addEventListener('change', () => {
this.updateBySelector()
}, !1);
this.measureSelector.addEventListener('change', () => {
this.updateBySelector();
}, !1);
}
updateBySelector = () => {
this.#a(this.periodicitySelector.value, this.measureSelector.value);
};
#a = (e, t) => {
let r = this.data.data[t][e];
let i = this.data.layout[t];
let c = this.data.config;
// Plotly.purge('revenue_trend');
Plotly.newPlot('revenue_trend', r, i, c)
};
}
let data = {
"config": {
"displaylogo": false,
"editable": true,
"responsive": true,
"scrollZoom": false
},
"data": {
"margin": {
"monthly": [
{
"hovertemplate": "Margin: %{y:.1%} <br> Month: %{x}",
"mode": "lines",
"name": 2019,
"type": "scattergl",
"x": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"y": [
0.0,
0.34047666529174736,
0.3457742367934246,
0.360425447773756,
0.35145317789771846,
0.35262465169115526,
0.36081828971765284,
0.3482103705232538,
0.3544357552302324,
0.3560519434681411,
0.3530277177894459,
0.3481856525787436
]
}
],
"weekly": [
{
"hovertemplate": "Margin: %{y:.1%} <br> Week: %{x}",
"mode": "lines",
"name": 2019,
"type": "scattergl",
"x": [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
"31",
"32",
"33",
"34",
"35",
"36",
"37",
"38",
"39",
"40",
"41",
"42",
"43",
"44",
"45",
"46",
"47",
"48",
"49",
"50",
"51",
"52",
"53"
],
"y": [
0.3525772625730744,
0.0,
0.0,
0.0,
0.0,
0.0,
0.0,
0.0,
0.32872302637273987,
0.31988710760016853,
0.6648776759648305,
0.36251039456330314,
0.3479492487227466,
0.36032892904889136,
0.35825354939402965,
0.3652140945623148,
0.35702058696618694,
0.3357665025509389,
0.35910528738699476,
0.3427007353759514,
0.34856822640364327,
0.37832888011952154,
0.34193158789278555,
0.35641605769889595,
0.3448526126036418,
0.3601298674795317,
0.34371914770696416,
0.35507083830741926,
0.35928883722389243,
0.3761116965344845,
0.3747882834748884,
0.3368771464780037,
0.34942511673599835,
0.3455765848399854,
0.3532858548316179,
0.36141903268210585,
0.3498830917602961,
0.3618410934198679,
0.3438166358418366,
0.34449309768685416,
0.356864537860347,
0.34723529927268637,
0.3676745634890173,
0.3618693942594029,
0.34298588976218763,
0.3352566880165647,
0.3604452053811187,
0.3747103844651644,
0.3606845347991698,
0.35760695701012907,
0.35939319863236174,
0.3143066542562211,
0.0,
0.0
]
}
]
},
"profit": {
"monthly": [
{
"hovertemplate": "Profit: %{y:$.3s} <br> Month: %{x}",
"mode": "lines",
"name": 2019,
"type": "scattergl",
"x": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"y": [
0.0,
82241.71801566076,
698471.2893310541,
809776.0576551692,
905852.9974110408,
806949.604447975,
879519.9288410447,
826189.5344694187,
808316.6091934182,
906734.9758119395,
979581.009182293,
908955.4254592669
]
},
{
"hovertemplate": "Profit: %{y:$.3s} <br> Month: %{x}",
"mode": "lines",
"name": 2020,
"type": "scattergl",
"x": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"y": [
1135979.408899994,
964943.64602906,
995304.3674288283,
1024706.6108813051,
1103515.5129930207,
1015253.3387089209,
1031872.3701810606,
961556.9417143296,
960168.8140742977,
975513.6905591306,
940461.8968359237,
957659.4350654411
]
}
],
"weekly": [
{
"hovertemplate": "Profit: %{y:$.3s} <br> Week: %{x}",
"mode": "lines",
"name": 2019,
"type": "scattergl",
"x": [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
"31",
"32",
"33",
"34",
"35",
"36",
"37",
"38",
"39",
"40",
"41",
"42",
"43",
"44",
"45",
"46",
"47",
"48",
"49",
"50",
"51",
"52",
"53"
],
"y": [
53940.84905653694,
0.0,
0.0,
0.0,
0.0,
0.0,
0.0,
0.0,
112362.51304952896,
88316.08623819001,
-13591.410108961667,
363463.5909494356,
230162.22721852647,
205764.7039970004,
181015.46405094466,
191425.28083589178,
185312.97173273505,
179535.2064339334,
209365.34755655692,
189140.77872531046,
192786.1297563088,
210319.9968558866,
174347.49981516943,
233383.52298594668,
177403.35738587088,
192778.39938264445,
206603.86815812724,
205930.40940254647,
197144.6390165437,
181545.0009244157,
209428.82504632138,
189043.93557342276,
174954.73107864038,
186139.80161511753,
154918.25249529246,
235388.5039071208,
184606.3008933945,
191768.82369324705,
196552.9806996637,
166520.89121735393,
240248.02746187564,
195047.01679875085,
231842.86053096992,
185437.38300792413,
200771.21331067267,
230667.93972635642,
224753.03475951828,
211027.61818081193,
210132.7742313298,
240756.1128576225,
210571.98628046684,
193553.70303329843,
0.0,
0.0
]
}
]
},
"revenue": {
"monthly": [
{
"hovertemplate": "Revenue: %{y:$.3s} <br> Month: %{x}",
"mode": "lines",
"name": 2019,
"type": "scattergl",
"x": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"y": [
0.0,
241548.76500916603,
2020021.2017193772,
2246722.762382407,
2577450.011491051,
2288409.5044913036,
2437570.250469525,
2372673.5456727156,
2280572.9875315665,
2546636.782767828,
2774799.1441469146,
2610548.1909645973
]
}
],
"weekly": [
{
"hovertemplate": "Revenue: %{y:$.3s}<br> Week: %{x}",
"mode": "lines",
"name": 2019,
"type": "scattergl",
"x": [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
"31",
"32",
"33",
"34",
"35",
"36",
"37",
"38",
"39",
"40",
"41",
"42",
"43",
"44",
"45",
"46",
"47",
"48",
"49",
"50",
"51",
"52",
"53"
],
"y": [
152990.15218077847,
0.0,
0.0,
0.0,
0.0,
0.0,
0.0,
0.0,
341815.1575488382,
276085.16923594667,
-20441.97090726295,
1002629.4318740314,
661482.1789769826,
571046.8613778194,
505271.9347990396,
524145.3812600044,
519054.0223673036,
534702.5539174988,
583019.3954535999,
551912.3806892863,
553080.0433114112,
555918.4294612729,
509890.0072076319,
654806.4205993534,
514432.40068988653,
535302.4472306541,
601083.3831528822,
579969.9304628688,
548707.9435582134,
482689.0591204212,
558792.3483215119,
561165.8064366985,
500693.0603984721,
538635.4567434222,
438506.80794771464,
651289.7291553597,
527622.8124217782,
529980.7765911351,
571679.6693633012,
483379.47069326247,
673219.1125022703,
561714.2531513739,
630565.4063498881,
512442.8480265313,
585362.8948114432,
688033.8199694896,
623542.8614506731,
563175.2599598169,
582594.3558914505,
673242.2514106827,
585909.7698058267,
615811.6616758438,
0.0,
0.0
]
}
]
}
},
"layout": {
"margin": {
"title": {
"font": {
"color": "#172631",
"size": 18.0
},
"text": "Margin Trend",
"x": 0.5,
"xref": "paper"
},
"xaxis": {
"hoverformat": "%b",
"tickmode": "array",
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Date"
}
},
"yaxis": {
"tickfont": {
"color": "#172631"
},
"tickformat": ".1%",
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Margin"
}
}
},
"profit": {
"title": {
"font": {
"color": "#172631",
"size": 18.0
},
"text": "Profit Trend",
"x": 0.5,
"xref": "paper"
},
"xaxis": {
"hoverformat": "%b",
"tickmode": "array",
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Date"
}
},
"yaxis": {
"tickfont": {
"color": "#172631"
},
"tickprefix": "$",
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Profit"
}
}
},
"revenue": {
"title": {
"font": {
"color": "#172631",
"size": 18.0
},
"text": "Revenue Trend",
"x": 0.5,
"xref": "paper"
},
"xaxis": {
"hoverformat": "%b",
"tickmode": "array",
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Date"
}
},
"yaxis": {
"tickfont": {
"color": "#172631"
},
"tickprefix": "$",
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Revenue"
}
}
}
}
};
new RevenueTrend(data);<html>
<head>
<title>My First Web Page</title>
<script src="https://cdn.plot.ly/plotly-2.14.0.min.js" crossorigin></script>
</head>
<body>
<div id="revenue_trend"></div>
<div class="control-row">
Periodicity:
<select id="revenue_trend_periodicity">
<option>monthly</option>
<option>weekly</option>
</select>
Measure:
<select id="revenue_trend_measure">
<option>revenue</option>
<option>profit</option>
<option>margin</option>
</select>
</div>
</body>
</html>最佳答案
经过长时间的调试，问题出在布局上，更深入地说，是x轴的类型，即几个月或几周。月和周的值被视为分类值，而不是整数。要解决此问题，请将每个 xaxis 更改为以下配置:
"xaxis": {
"hoverformat": "%b",
"tickmode": "array",
"type":"category", //<------------ add this line
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Date"
}
},
输出:
关于javascript - 为什么我的plotly 绘图在某些条件下无法使用plotly.js 显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73950325/