尝试在streamlit上得到一个基本的highcharts圆柱图

zour9fqk  于 2022-11-24  发布在  Highcharts
关注(0)|答案(1)|浏览(151)

我已经能够得到一个 highcharts 瀑布图和一个面积图工作的streamlit,但圆柱图是不显示任何东西。希望有人可以看看我的代码...

import streamlit as st
import streamlit_highcharts as hct

chart_week_day={
    "chart": {
        "type": "cylinder",
        "options3d": {
            "enabled": True,
            "alpha": 8,
            "beta": 15,
            "depth": 50,
            "viewDistance": 150
        }
    },
    "title": {
        "text": "Return by Weekday"
    },
    "xAxis": {
        "categories": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
        "title": {
            "text": ''
        }
    },
    "yAxis": {
        "title": {
            "margin": 40,
            "text": '$'
        }
    },
    "plotOptions": {
        "series": {
            "depth": 300,
            "colorByPoint": False,
            "negativeColor": 'pink'
        }
    },
    "series": [{
        "data": [200,300,400,500,600],
        "name": '$',
        "showInLegend": False
    }]
}

hct.streamlit_highcharts(chart_week_day,500,key="week_day")
ftf50wuq

ftf50wuq1#

Series.data需要数字,而xAxis.categories应该是字符串。因此,您只需要交换类别和数据值。

JS演示:https://jsfiddle.net/BlackLabel/qx3pzn1f/
API参考:https://api.highcharts.com/highcharts/series.cylinder.datahttps://api.highcharts.com/highcharts/xAxis.categories

正如@ferdy提到的,不要忘记包括必要的模块:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/cylinder.js"></script>

相关问题