HighCharts学习-柱形图

来源：互联网发布：掌握仓库办公软件编辑：程序博客网时间：2024/06/09 22:32
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Highcharts Example</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript">$(function () {    var chart;    $(document).ready(function() {        chart = new Highcharts.Chart({                chart: {                renderTo: 'container',                type: 'column',enabled: false            },                title: {                text: 'tittle'            },legend: {enabled:false // 是否显示折线标题 默认为true            },            xAxis: {                categories: ['', '']            },                yAxis: {                allowDecimals: false,gridLineWidth: 0, //横向网格线宽度  为0时不横向显示网格                title: {                    text: ''                },labels:{enabled:false //不显示Y轴刻度线}            },                tooltip: {                formatter: function() {                    return '<b>'+ this.x +'</b><br/>'+                        this.series.name +': '+ this.y +'<br/>'+                        'Total: '+ this.point.stackTotal;                }            },                plotOptions: {                column: {                    stacking: 'normal'                },series: {pointWidth: 30 //柱子的宽度值 单位为px}            },                series: [{                name: '1',                data: [4],color:'#DC143C'            },{                name: '2',                data: [4],                stack: 'male',color: 'LightSteelBlue'            }, {                name: '3',                data: [4],                stack: 'male',color: 'Silver'            }, {                name: '4',                data: [4],                stack: 'male',color: 'Gray'            }],credits:{enabled: false}        },function(chart) { // on complete     /* 设置折线 */chart.renderer.path(['M', 1045, 288, 'L', 1145, 230, 1320, 230])            .attr({                'stroke-width': 1,                stroke: 'gray'            })            .add(); /* 设置文字显示  文字可以斜着*/chart.renderer.text('阈值1', 1290, 227) //设置文字显示             .attr({                rotation: 0 //负数为逆时针倾斜，正数为顺时针倾斜            })            .css({                color: '#000',                fontSize: '16px'            })            .add();/* 设置折线 */chart.renderer.path(['M', 1045, 190, 'L', 1145, 137, 1320, 137])            .attr({                'stroke-width': 1,                stroke: 'gray'            })            .add(); /* 设置文字显示  文字可以斜着*/chart.renderer.text('阈值2', 1290, 135) //设置文字显示             .attr({                rotation: 0 //负数为逆时针倾斜，正数为顺时针倾斜            })            .css({                color: '#000',                fontSize: '16px'            })            .add();/* 设置折线 */chart.renderer.path(['M', 1045, 90, 'L', 1145, 45, 1320, 45])            .attr({                'stroke-width': 1,                stroke: 'gray'            })            .add(); /* 设置文字显示  文字可以斜着*/chart.renderer.text('阈值3', 1290, 42) //设置文字显示             .attr({                rotation: 0 //负数为逆时针倾斜，正数为顺时针倾斜            })            .css({                color: '#000',                fontSize: '16px'            })            .add();/* 设置左侧折线 */chart.renderer.path(['M', 360, 288, 'L', 256, 230, 81, 230])            .attr({                'stroke-width': 1,                stroke: 'gray'            })            .add(); /* 设置文字显示  文字可以斜着*/chart.renderer.text('阈值4', 81, 227) //设置文字显示             .attr({                rotation: 0 //负数为逆时针倾斜，正数为顺时针倾斜            })            .css({                color: '#000',                fontSize: '16px'            })            .add();/* 改变坐标点颜色 *//*chart.series[0].points[7].update({marker:{//enabled: false, //折线上是否显示点fillColor: 'grsy', //元素点颜色states:{select:{enabled:false},hover:{enabled:false}}}});*//*chart.series[0].points[2].update({marker:{fillColor: 'grsy'}});chart.series[1].points[2].update({marker:{fillColor: 'blue'}});chart.series[2].points[2].update({marker:{fillColor: '#778899'}});*/});    });    });</script></head><body><script src="../../js/highcharts.js"></script><div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div></body></html>
0 0