我用 Python 创建了一个带有下拉列表的 Plotly 图表，并将图表导出为 JSON。然后将该 JSON 存储在数据库中。之后以 HTML 形式呈现图表 JSON。在 HTML 中，图表内的下拉菜单不起作用意味着当我选择任何下拉值时图表不会根据该选择而变化。以下是我的 Python Plotly 图表代码。以下是 Plotly 的代码
import pandas as pd
import plotly.express as px
import json
# Create the data table
data = {
'Country': ['United States', 'United States', 'United States', 'United States', 'United States', 'United States',
'United States', 'United States', 'United States', 'China', 'China', 'China', 'China', 'China', 'China',
'China', 'China', 'China', 'India', 'India', 'India', 'India', 'India', 'India', 'India', 'India',
'India', 'Indonesia', 'Indonesia', 'Indonesia', 'Indonesia', 'Indonesia', 'Indonesia'],
'State': ['California', 'California', 'California', 'Texas', 'Texas', 'Texas', 'New York', 'New York', 'New York',
'Guangdong', 'Guangdong', 'Guangdong', 'Shandong', 'Shandong', 'Shandong', 'Henan', 'Henan', 'Henan',
'Uttar Pradesh', 'Uttar Pradesh', 'Uttar Pradesh', 'Maharashtra', 'Maharashtra', 'Maharashtra', 'Bihar',
'Bihar', 'Bihar', 'Jakarta', 'Jakarta', 'Jakarta', 'West Java', 'West Java', 'West Java'],
'Race': ['White', 'Hispanic', 'Asian', 'White', 'Hispanic', 'African-American', 'White', 'African-American', 'Asian',
'Han Chinese', 'Zhuang', 'Yao', 'Han Chinese', 'Hui', 'Manchu', 'Han Chinese', 'Uighur', 'Korean',
'Indo-Aryan', 'Dravidian', 'Mongoloid', 'Indo-Aryan', 'Dravidian', 'Mongoloid', 'Indo-Aryan', 'Dravidian',
'Mongoloid', 'Javanese', 'Sundanese', 'Betawi', 'Sundanese', 'Javanese', 'Betawi'],
'Population': [20000000, 10000000, 8000000, 15000000, 5000000, 3000000, 12000000, 8000000, 4000000, 100000000,
5000000, 3000000, 80000000, 6000000, 4000000, 75000000, 4000000, 3000000, 180000000, 120000000,
10000000, 100000000, 60000000, 5000000, 90000000, 75000000, 5000000, 10000000, 7000000, 4000000,
25000000, 10000000, 4000000],
'Weight %': [50, 25, 20, 60, 20, 12, 45, 30, 15, 90, 4.5, 2.5, 85, 6, 4, 88, 4.7, 3.5, 55, 37, 3, 60, 35, 3, 50,
40, 4, 40, 28, 16, 60, 25, 10]
}
df = pd.DataFrame(data)
# Create the treemap
fig = px.treemap(df, path=['Country', 'State', 'Race'], values='Population', color='Population', color_continuous_scale='RdBu', title='Population Treemap')
# Set the color bar title
fig.update_layout(coloraxis_colorbar_title='<b>Population</b>')
# Set the title
fig.update_layout(title={'text': '<b>Population by Race in Top States of Different Countries</b>', 'font': {'color': '#283347'}})
# Customize hover labels
fig.data[0].hovertemplate = '<b>%{label}</b><br>Population: %{value:,}<br>Weight %: %{customdata:.2f}%'
# Remove parent and ID fields from hover
fig.data[0].hovertemplate = fig.data[0].hovertemplate.replace('%{parent}<br>', '').replace('%{id}<br>', '')
# Display the treemap
# fig.show()
# Create dropdown options
dropdown_options = [
{'label': 'Group by Country', 'value': ['Country', 'State', 'Race']},
{'label': 'Group by Race', 'value': ['Race', 'Country', 'State']}
]
# Define a callback function to update the treemap based on dropdown selection
def update_treemap(selected_option):
fig.update_traces(path=selected_option)
# Add dropdown menu
update_menus = [
{
'buttons': [
{'method': 'relayout', 'label': option['label'], 'args': [{'treemap.path': option['value']}]}
for option in dropdown_options
],
'direction': 'down',
'showactive': True,
'x': 0.1,
'y': 1.07
}
]
fig.update_layout(updatemenus=update_menus)
# Save the chart data as JSON
chart_data_json = fig.to_json()
#store chart_data_json to postgres
然后将 JSON 输出存储在 RDBMS 中并使其呈现在 HTML 上。以下是 HTML 文件
<!DOCTYPE html>
<html>
<head>
<title>Plotly Chart</title>
<!-- Include plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Container for the chart -->
<div id="chart-container"></div>
<!-- Load and render the chart using JavaScript -->
<script>
var chartData = '{"data":[{"branchvalues":"total","customdata":[[8000000.0],[3000000.0],[8000000.0],[4000000.0],[4000000.0],[4000000.0],[75000000.0],[60000000.0],[120000000.0],[100000000.0],[75000000.0],[80000000.0],[10000000.0],[5000000.0],[6000000.0],[90000000.0],[100000000.0],[180000000.0],[10000000.0],[10000000.0],[3000000.0],[4000000.0],[5000000.0],[5000000.0],[10000000.0],[7000000.0],[25000000.0],[4000000.0],[20000000.0],[12000000.0],[15000000.0],[3000000.0],[5000000.0],[80882352.94117647],[14842105.263157895],[92907407.4074074],[68902439.02439025],[7857142.857142857],[82575757.57575758],[9333333.333333334],[71688888.8888889],[11260869.56521739],[151290322.58064517],[19000000.0],[79057142.85714285],[115155038.75968993],[15100000.0],[12317647.05882353]],"domain":{"x":[0.0,1.0],"y":[0.0,1.0]},"hovertemplate":"\\u003cb\\u003e%{label}\\u003c\\u002fb\\u003e\\u003cbr\\u003ePopulation: %{value:,}\\u003cbr\\u003eWeight %: %{customdata:.2f}%","ids":["United States\\u002fNew York\\u002fAfrican-American","United States\\u002fTexas\\u002fAfrican-American","United States\\u002fCalifornia\\u002fAsian","United States\\u002fNew York\\u002fAsian","Indonesia\\u002fJakarta\\u002fBetawi","Indonesia\\u002fWest Java\\u002fBetawi","India\\u002fBihar\\u002fDravidian","India\\u002fMaharashtra\\u002fDravidian","India\\u002fUttar Pradesh\\u002fDravidian","China\\u002fGuangdong\\u002fHan Chinese","China\\u002fHenan\\u002fHan Chinese","China\\u002fShandong\\u002fHan Chinese","United States\\u002fCalifornia\\u002fHispanic","United States\\u002fTexas\\u002fHispanic","China\\u002fShandong\\u002fHui","India\\u002fBihar\\u002fIndo-Aryan","India\\u002fMaharashtra\\u002fIndo-Aryan","India\\u002fUttar Pradesh\\u002fIndo-Aryan","Indonesia\\u002fJakarta\\u002fJavanese","Indonesia\\u002fWest Java\\u002fJavanese","China\\u002fHenan\\u002fKorean","China\\u002fShandong\\u002fManchu","India\\u002fBihar\\u002fMongoloid","India\\u002fMaharashtra\\u002fMongoloid","India\\u002fUttar Pradesh\\u002fMongoloid","Indonesia\\u002fJakarta\\u002fSundanese","Indonesia\\u002fWest Java\\u002fSundanese","China\\u002fHenan\\u002fUighur","United States\\u002fCalifornia\\u002fWhite","United States\\u002fNew York\\u002fWhite","United States\\u002fTexas\\u002fWhite","China\\u002fGuangdong\\u002fYao","China\\u002fGuangdong\\u002fZhuang","India\\u002fBihar","United States\\u002fCalifornia","China\\u002fGuangdong","China\\u002fHenan","Indonesia\\u002fJakarta","India\\u002fMaharashtra","United States\\u002fNew York","China\\u002fShandong","United States\\u002fTexas","India\\u002fUttar Pradesh","Indonesia\\u002fWest Java","China","India","Indonesia","United States"],"labels":["African-American","African-American","Asian","Asian","Betawi","Betawi","Dravidian","Dravidian","Dravidian","Han Chinese","Han Chinese","Han Chinese","Hispanic","Hispanic","Hui","Indo-Aryan","Indo-Aryan","Indo-Aryan","Javanese","Javanese","Korean","Manchu","Mongoloid","Mongoloid","Mongoloid","Sundanese","Sundanese","Uighur","White","White","White","Yao","Zhuang","Bihar","California","Guangdong","Henan","Jakarta","Maharashtra","New York","Shandong","Texas","Uttar Pradesh","West Java","China","India","Indonesia","United States"],"marker":{"coloraxis":"coloraxis","colors":[8000000.0,3000000.0,8000000.0,4000000.0,4000000.0,4000000.0,75000000.0,60000000.0,120000000.0,100000000.0,75000000.0,80000000.0,10000000.0,5000000.0,6000000.0,90000000.0,100000000.0,180000000.0,10000000.0,10000000.0,3000000.0,4000000.0,5000000.0,5000000.0,10000000.0,7000000.0,25000000.0,4000000.0,20000000.0,12000000.0,15000000.0,3000000.0,5000000.0,80882352.94117647,14842105.263157895,92907407.4074074,68902439.02439025,7857142.857142857,82575757.57575758,9333333.333333334,71688888.8888889,11260869.56521739,151290322.58064517,19000000.0,79057142.85714285,115155038.75968993,15100000.0,12317647.05882353]},"name":"","parents":["United States\\u002fNew York","United States\\u002fTexas","United States\\u002fCalifornia","United States\\u002fNew York","Indonesia\\u002fJakarta","Indonesia\\u002fWest Java","India\\u002fBihar","India\\u002fMaharashtra","India\\u002fUttar Pradesh","China\\u002fGuangdong","China\\u002fHenan","China\\u002fShandong","United States\\u002fCalifornia","United States\\u002fTexas","China\\u002fShandong","India\\u002fBihar","India\\u002fMaharashtra","India\\u002fUttar Pradesh","Indonesia\\u002fJakarta","Indonesia\\u002fWest Java","China\\u002fHenan","China\\u002fShandong","India\\u002fBihar","India\\u002fMaharashtra","India\\u002fUttar Pradesh","Indonesia\\u002fJakarta","Indonesia\\u002fWest Java","China\\u002fHenan","United States\\u002fCalifornia","United States\\u002fNew York","United States\\u002fTexas","China\\u002fGuangdong","China\\u002fGuangdong","India","United States","China","China","Indonesia","India","United States","China","United States","India","Indonesia","","","",""],"values":[8000000,3000000,8000000,4000000,4000000,4000000,75000000,60000000,120000000,100000000,75000000,80000000,10000000,5000000,6000000,90000000,100000000,180000000,10000000,10000000,3000000,4000000,5000000,5000000,10000000,7000000,25000000,4000000,20000000,12000000,15000000,3000000,5000000,170000000,38000000,108000000,82000000,21000000,165000000,24000000,90000000,23000000,310000000,39000000,280000000,645000000,60000000,85000000],"type":"treemap"}],"layout":{"template":{"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmapgl":[{"type":"heatmapgl","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"fillpattern":{"fillmode":"overlay","size":10,"solidity":0.2},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"bar":[{"error_x":{"color":"#2a3f5f"},"error_y":{"color":"#2a3f5f"},"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"type":"scattergl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"carpet":[{"aaxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"baxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"type":"carpet"}],"table":[{"cells":{"fill":{"color":"#EBF0F8"},"line":{"color":"white"}},"header":{"fill":{"color":"#C8D4E3"},"line":{"color":"white"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]},"layout":{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"white","plot_bgcolor":"#E5ECF6","polar":{"bgcolor":"#E5ECF6","angularaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"radialaxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"ternary":{"bgcolor":"#E5ECF6","aaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"baxis":{"gridcolor":"white","linecolor":"white","ticks":""},"caxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"yaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"zaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"white","landcolor":"#E5ECF6","subunitcolor":"white","showland":true,"showlakes":true,"lakecolor":"white"},"title":{"x":0.05},"mapbox":{"style":"light"}}},"coloraxis":{"colorbar":{"title":{"text":"\\u003cb\\u003ePopulation\\u003c\\u002fb\\u003e"}},"colorscale":[[0.0,"rgb(103,0,31)"],[0.1,"rgb(178,24,43)"],[0.2,"rgb(214,96,77)"],[0.3,"rgb(244,165,130)"],[0.4,"rgb(253,219,199)"],[0.5,"rgb(247,247,247)"],[0.6,"rgb(209,229,240)"],[0.7,"rgb(146,197,222)"],[0.8,"rgb(67,147,195)"],[0.9,"rgb(33,102,172)"],[1.0,"rgb(5,48,97)"]]},"legend":{"tracegroupgap":0},"title":{"text":"\\u003cb\\u003ePopulation by Race in Top States of Different Countries\\u003c\\u002fb\\u003e","font":{"color":"#283347"}},"updatemenus":[{"buttons":[{"args":[{"treemap.path":["Country","State","Race"]}],"label":"Group by Country","method":"relayout"},{"args":[{"treemap.path":["Race","Country","State"]}],"label":"Group by Race","method":"relayout"}],"direction":"down","showactive":true,"x":0.1,"y":1.07}]}}';
chartData = JSON.parse(chartData);
// Render the chart using plotly.js
Plotly.newPlot('chart-container', chartData.data, chartData.layout);
</script>
</body>
</html>