美文网首页
2018-11-15 highcharts 图表控件

2018-11-15 highcharts 图表控件

作者: 1f658716b568 | 来源:发表于2018-11-15 11:26 被阅读0次

失败方法论

<script type="text/javascript">
    $(function () {
        ChartLoad();
    });

    function ChartLoad() {

        $('#container').highcharts({

            title: {
                text: 'Solar Employment Growth by Sector, 2010-2016'
            },

            subtitle: {
                text: 'Source: thesolarfoundation.com'
            },

            yAxis: {
                title: {
                    text: 'Number of Employees'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },

            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    pointStart: 2010
                }
            },

            series: [{
                name: 'Installation',
                data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
            }, {
                name: 'Manufacturing',
                data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
            }, {
                name: 'Sales & Distribution',
                data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
            }, {
                name: 'Project Development',
                data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
            }, {
                name: 'Other',
                data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
            }],

            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }


        });
    }
</script>

相关文章

  • 2018-11-15 highcharts 图表控件

    失败方法论

  • Highcharts图表控件

    一、Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大、...

  • highcharts

    1.调用highcharts 2.设置图表类型 3.设置图表标题 4.设置图表副标题

  • ionic 气泡图

    1、创建 ionic 项目 ionic start MyChart tabs 2、创建Highcharts图表 ...

  • 02图表配置

    图表容器 此处列举了三种方式进行 Highcharts 配置 图表配置 这里主要涉及chart内各种配置项 图表样...

  • HighCharts-Vue图表响应式方案

    前沿 小编最近在开发可视化图表(HighCharts-Vue)过程中遇到一个奇葩的bug,highCharts的响...

  • Highcharts Highstock如何在x轴Navigat

    当前公司在使用HighCharts来做图表展示大量数据. 其中HighStock是很好的展示时间轴图表的工具. 最...

  • highcharts多个可能存在显示问题

    现象: 同一个页面嵌套了两个以上的highcharts图表(或引入了两个子组件,子组件中均有highcharts图...

  • 关于ECharts图表

    这篇文章谈及到的问题: 关于ECharts图表的实例化方式和Highcharts图表的实例化方法有些类似,都是通过...

  • 用highcharts做网站图表,只要3步

    WHY 为啥使用highcharts做图表? 免费个人网站等非商业使用是免费的 功能稳定,强大地图,股票等图表不在...

网友评论

      本文标题:2018-11-15 highcharts 图表控件

      本文链接:https://www.haomeiwen.com/subject/isaefqtx.html