Python使用Flask框架，结合Highchart，自定义图表样式主题

参考链接：https://www.highcharts.com.cn/docs/themes

1.使用官方提供的主题js文件，只需要在 highcharts.js 后引入对应的文件即可，不用修改原有的js文件

示例代码：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个 Highcharts 图表</title>

    <!-- 引入 jquery.js -->
    <script src="static/jquery-3.3.1.min.js"></script>
    <!-- 引入 highcharts.js -->
    <script src="static/highcharts-7.0.3.js"></script>
    {#    使用官方提供的主题#}
    <script src="https://img.highcharts.com.cn/highcharts/themes/dark-unica.js"></script>

</head>
<body>

<!-- 图表容器 DOM -->
<div id="container" style="min-width:400px;height:400px"></div>

<script src="static/b.js"></script>
</body>
</html>

 

2.自定义主题文件。

将图表的样式和数据配置分离是非常有必要的，样式分离后独立成主题可以在对页面上所有图表有效。
创建主题文件很简单，只需要将样式相关配置通过 Highcharts.setOptions() 函数生效（这也是我们提供的主题使用的方法）

示例代码：

js代码：

需要注意的是设置的主题配置一定要要在图表数据前面，否则不生效，原有的html页面不用修改

Highcharts.theme = {
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(240, 240, 255)']
            ]
        },
    },
    title: {
        style: {
            color: '#2970f9',
            font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
        }
    },
    subtitle: {
        style: {
            color: '#666666',
            font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
        }
    },

    legend: {
        itemStyle: {
            font: '9pt Trebuchet MS, Verdana, sans-serif',
            color: 'blue'
        },
        itemHoverStyle: {
            color: 'gray'
        }
    }
};

// 使主题配置生效
Highcharts.setOptions(Highcharts.theme);

var chart = Highcharts.chart('container', {
    title: {
        text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
    },
    subtitle: {
        text: '数据来源：thesolarfoundation.com'
    },
    yAxis: {
        title: {
            text: '就业人数'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },
    series: [{
        name: '安装，实施人员',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: '工人',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: '销售',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: '项目开发',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: '其他',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }
});

 

另一个注意的事项：

若是html页面引用官方官方提供的js主题文件和js代码中自定义的主题同时存在，以后者自己在js中自定义的为准。

posted @ 2019-02-27 14:25  哈喽哈喽111111  阅读(622)  评论(0)  编辑  收藏  举报