• highcharts高级画图柱状图和折线图


    折线图一枚

    $("#z_line").highcharts({
                chart: {
                    type: 'line'
                },
                credits: {
                    enabled: false // 禁用版权信息
                },
                title: {
                    text: 0  //禁止标题显示
                },
                xAxis: {
                    categories: date //时间轴
                },
                yAxis: [{
                    lineWidth: 1,
                    title: {
                        text: '收益(元)'
                    }
                }, {
                    title: {
                        text: '收盘价(元)'
                    },
                    lineWidth: 1,
                    opposite: true
                }, {
                    title: {
                        text: '大盘'
                    },
                    lineWidth: 1,
                    opposite: true
                }],
                series: [{
                    data: dapan,
                    yAxis: 2,
                    name: '大盘',
                    color: "#9B59B6"
                }, {
                    data: shoupan,
                    yAxis: 1,
                    name: '收盘价',
                    color: "#3498DB"
                }, {
                    data: shouyi,
                    name: '收益(红盈利|绿亏损)',
                    color: "#E74C3C",
                    yAxis: 0,
                    zones: [{
                        value: 0,
                        color: '#2ECC71'
                    }]
                }]
            });
    

      柱状图两两对比,分两组。

    $('#zhu').highcharts({
        chart: {
            type: 'column'
        },
        legend: {
            enabled: true
        },
        xAxis: {
            categories: ['002131','002131','002131','002131','002131','002131','002131','002131','002131',
                '002131','002131','002131','002131','002131','002131','002131','002131','002131',
                '002131','002131']
        },
        plotOptions: {
            series: {
                allowPointSelect: true,
                states: {
                    hover: {
                        enabled: false
                    }
                }
            }
        },
        series: [{
            name: '止损收益(红盈利|绿亏损)',
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            color: "#ff0000",
            zones: [{
                value: 0,
                color: '#2ECC71'
            }]
        },
            {
                name: '不止损收益(红盈利|绿亏损)',
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, -54.4],
                color: "#000",
                zones: [{
                    value: 0,
                    color: '#2ECC71'
                }]
            },
        ]
    });
    

      两个图花了老夫好些时间,总算是满意了。

  • 相关阅读:
    React 懒加载组件
    按键精灵Q语言基础
    zookeeper安装和配置(单机+伪集群+集群)
    hbase-site.xml 配置详解
    MySQL主从复制与读写分离概念及架构分析
    mysql 主从复制原理
    Struts2教程
    广告点击率预测(CTR) —— 在线学习算法FTRL的应用
    搭建git服务器
    git常用命令
  • 原文地址:https://www.cnblogs.com/webSong/p/7225197.html
Copyright © 2020-2023  润新知