HCharts 柱状图分组效果 - 统计两年的设备数量对比

上图喽,铭记咱滴劳作。

这里写图片描述

核心代码:

**主题文件**
hcharts.js
/**
 * Dark theme for Highcharts JS
 * @author Torstein Honsi
 */

// Load the fonts
Highcharts.createElement('link', {
    href: 'http://fonts.googleapis.com/css?family=Unica+One',
    rel: 'stylesheet',
    type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);

Highcharts.theme = {
    colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
    chart: {
        backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
            stops: [
                [0, '#2a2a2b'],
                [1, '#3e3e40']
            ]
        },
        style: {
            fontFamily: "'Unica One', sans-serif"
        },
        plotBorderColor: '#606063'
    },
    title: {
        style: {
            color: '#E0E0E3',
            textTransform: 'uppercase',
            fontSize: '20px'
        }
    },
    subtitle: {
        style: {
            color: '#E0E0E3',
            textTransform: 'uppercase'
        }
    },
    xAxis: {
        gridLineColor: '#707073',
        labels: {
            style: {
                color: '#E0E0E3'
            }
        },
        lineColor: '#707073',
        minorGridLineColor: '#505053',
        tickColor: '#707073',
        title: {
            style: {
                color: '#A0A0A3'

            }
        }
    },
    yAxis: {
        gridLineColor: '#707073',
        labels: {
            style: {
                color: '#E0E0E3'
            }
        },
        lineColor: '#707073',
        minorGridLineColor: '#505053',
        tickColor: '#707073',
        tickWidth: 1,
        title: {
            style: {
                color: '#A0A0A3'
            }
        }
    },
    tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.85)',
        style: {
            color: '#F0F0F0'
        }
    },
    plotOptions: {
        series: {
            dataLabels: {
                color: '#B0B0B3'
            },
            marker: {
                lineColor: '#333'
            }
        },
        boxplot: {
            fillColor: '#505053'
        },
        candlestick: {
            lineColor: 'white'
        },
        errorbar: {
            color: 'white'
        }
    },
    legend: {
        itemStyle: {
            color: '#E0E0E3'
        },
        itemHoverStyle: {
            color: '#FFF'
        },
        itemHiddenStyle: {
            color: '#606063'
        }
    },
    credits: {
        style: {
            color: '#666'
        }
    },
    labels: {
        style: {
            color: '#707073'
        }
    },

    drilldown: {
        activeAxisLabelStyle: {
            color: '#F0F0F3'
        },
        activeDataLabelStyle: {
            color: '#F0F0F3'
        }
    },

    navigation: {
        buttonOptions: {
            symbolStroke: '#DDDDDD',
            theme: {
                fill: '#505053'
            }
        }
    },

    // scroll charts
    rangeSelector: {
        buttonTheme: {
            fill: '#505053',
            stroke: '#000000',
            style: {
                color: '#CCC'
            },
            states: {
                hover: {
                    fill: '#707073',
                    stroke: '#000000',
                    style: {
                        color: 'white'
                    }
                },
                select: {
                    fill: '#000003',
                    stroke: '#000000',
                    style: {
                        color: 'white'
                    }
                }
            }
        },
        inputBoxBorderColor: '#505053',
        inputStyle: {
            backgroundColor: '#333',
            color: 'silver'
        },
        labelStyle: {
            color: 'silver'
        }
    },

    navigator: {
        handles: {
            backgroundColor: '#666',
            borderColor: '#AAA'
        },
        outlineColor: '#CCC',
        maskFill: 'rgba(255,255,255,0.1)',
        series: {
            color: '#7798BF',
            lineColor: '#A6C7ED'
        },
        xAxis: {
            gridLineColor: '#505053'
        }
    },

    scrollbar: {
        barBackgroundColor: '#808083',
        barBorderColor: '#808083',
        buttonArrowColor: '#CCC',
        buttonBackgroundColor: '#606063',
        buttonBorderColor: '#606063',
        rifleColor: '#FFF',
        trackBackgroundColor: '#404043',
        trackBorderColor: '#404043'
    },

    // special colors for some of the
    legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
    background2: '#505053',
    dataLabelsColor: '#B0B0B3',
    textColor: '#FFD388',
    contrastTextColor: '#F0F0F3',
    maskColor: 'rgba(255,255,255,0.3)'
};

// Apply the theme
Highcharts.setOptions(Highcharts.theme);

具体的实现模块

 function hcharts(cate, data2015, data2016) {
            var year = [];
            year.push($("#<%=txtYear.ClientID %>").val());//今年
            year.push(((year[0] != null || year[0] != "") ? year[0] - 1 : ''));//去年
            $('#container').highcharts({
                chart: {
                    type: 'column',
                    margin: [50, 50, 100, 80]
                },
                title: {
                    text: '<span style="color:red">'+year[1]+'-'+year[0]+'</span> 年度计划对比分析图'
                },
                xAxis: {
                    categories: cate,
                    labels: {
                        rotation: -45,
                        align: 'right',
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '数量 (个/台)'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    align: 'right',
                    x: -70,
                    verticalAlign: 'top',
                    y: 20,
                    floating: true,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || '#5DA2E5',
                    borderColor: '#1E1E1E',
                    borderWidth: 1,
                    shadow: true
                },
                tooltip: {
                    pointFormat: '<span style="color:tomato">{series.name}</span>总计划 <b><span style="color:red">{point.y}</span> (个/台)</b>',
                },
                series: [{
                    name: year[1]+'年',
                    data: data2015,
                    dataLabels: {
                        enabled: true,
                        rotation: -90,
                        color: 'tomato',
                        align: 'right',
                        x: 4,
                        y: 1,
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif',
                            textShadow: '0 0 3px black'
                        }
                    }
                }, {
                    name: year[0]+'年',
                    data: data2016,
                    dataLabels: {
                        enabled: true,
                        rotation: -90,
                        color: 'tomato',
                        align: 'right',
                        x: 4,
                        y: 1,
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif',
                            textShadow: '0 0 3px black'
                        }
                    }
                }]
            });
        }

说到现在,那么你会问了,你这方法里面传进去的是什么东东阿?
ok,晒一下

cate = [‘避雷器’,’电缆’,….]
data2015 =[1,33…..]
data2016 =[33,36…..]
懂了吧?其实就是数组嘛

好了,希望对你也有帮助哦

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我了解您的要求,以下是回答: 为了实现您的要求,我使用Python语言和Matplotlib库来可视化展示Titanic数据集的数据分布。 首先是舱位等级和存活的柱状图,代码如下: ```python import pandas as pd import matplotlib.pyplot as plt # 读取Titanic数据集 titanic_data = pd.read_csv('titanic.csv') # 统计每个舱位等级的存活人数 survived_by_pclass = titanic_data.groupby('Pclass')['Survived'].sum() # 绘制柱状图 plt.bar(survived_by_pclass.index, survived_by_pclass.values) plt.xticks([1, 2, 3]) plt.xlabel('Pclass') plt.ylabel('Survived') plt.title('Survived by Pclass') plt.show() ``` 接下来是登陆港口和存活的柱状图,代码如下: ```python import pandas as pd import matplotlib.pyplot as plt # 读取Titanic数据集 titanic_data = pd.read_csv('titanic.csv') # 统计每个登陆港口的存活人数 survived_by_embarked = titanic_data.groupby('Embarked')['Survived'].sum() # 绘制柱状图 plt.bar(survived_by_embarked.index, survived_by_embarked.values) plt.xlabel('Embarked') plt.ylabel('Survived') plt.title('Survived by Embarked') plt.show() ``` 然后是年龄和舱位等级的箱线图,代码如下: ```python import pandas as pd import matplotlib.pyplot as plt # 读取Titanic数据集 titanic_data = pd.read_csv('titanic.csv') # 绘制箱线图 plt.boxplot([titanic_data[titanic_data.Pclass == 1].Age.dropna(), titanic_data[titanic_data.Pclass == 2].Age.dropna(), titanic_data[titanic_data.Pclass == 3].Age.dropna()]) plt.xticks([1, 2, 3], ['1st', '2nd', '3rd']) plt.xlabel('Pclass') plt.ylabel('Age') plt.title('Age by Pclass') plt.show() ``` 最后是年龄和存活的直方图,代码如下: ```python import pandas as pd import matplotlib.pyplot as plt # 读取Titanic数据集 titanic_data = pd.read_csv('titanic.csv') # 绘制直方图 plt.hist([titanic_data[titanic_data.Survived == 0].Age.dropna(), titanic_data[titanic_data.Survived == 1].Age.dropna()], bins=20, label=['Not survived', 'Survived']) plt.xlabel('Age') plt.ylabel('Frequency') plt.title('Survival by Age') plt.legend() plt.show() ``` 以上是对Titanic数据集的数据分布可视化展示,希望能够满足您的需求。如有其他问题,请随时提出。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值