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'
            }]
        },
    ]
});

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

原文地址:https://www.cnblogs.com/webSong/p/7225197.html