Highcharts 图表编辑主要属性汇总

简介: <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Highcharts Example</title><script type="te




<!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://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
<style type="text/css">
#container, #sliders {
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
#container {
height: 400px;
max-width: 800px;
}
</style>
<script type="text/javascript">



$(function () {


  Highcharts.setOptions({//全局变量设置,(本例用于汉化)
   lang:{
      contextButtonTitle:"图表导出菜单",
      decimalPoint:".",
      downloadJPEG:"下载JPEG图片",
      downloadPDF:"下载PDF文件",
      downloadPNG:"下载PNG文件",
      downloadSVG:"下载SVG文件",
      drillUpText:"返回 {series.name}",
      loading:"加载中",
      months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
      noData:"没有数据",
      numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],
      printChart:"打印图表",
      resetZoom:"恢复缩放",
      resetZoomTitle:"恢复图表",
      shortMonths: [ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"],
      thousandsSep:",",
      weekdays: ["星期一", "星期二", "星期三", "星期三", "星期四", "星期五", "星期六","星期天"]
   }
    });


    // Set up the chart
    var chart = new Highcharts.Chart({
        chart: {
        events: {
                click: function (event) {
                alert("点击了图表事件");   
               }
            },
            renderTo: 'container',//容器,与id一致
            type: 'column',//图表显示类型,列
            margin: 100,//图与容器左右上下边距
            options3d: {
                enabled: true,//画图表是否启用3D函数
                alpha: 10,//内旋角度,垂直面向自己旋转向自己,
                //调外旋后,由于倾斜,导致图形左右间距不一样,
                //可以通过调plotOptions.column.pointPadding
                beta: 10,//外旋角度,左右顺时针
                depth: 100,//深度
                viewDistance: 100
            },
           style:{


           height:'500px'
               }  
            
        },
         xAxis: {//x轴坐标
         lineWidth:1,//x轴线宽度
         gridLineWidth:2, //网格线宽度
         gridLineColor: '#197F07',//网格线颜色
        // tickPixelInterval:100,//设置x坐标之间的距离
         title: {
                text: 'x轴标题'                  //指定y轴的标题
            },
            categories: [1,2, 3,4] ,  //指定x轴分组
           plotBands: [{//标示区
      
            }]
        },
        yAxis: {//y轴坐标
        tickInterval: 20,//设置y轴间隔
            title: {
                text: 'y轴标题'                  //指定y轴的标题
            },
            labels: {
   formatter:function(){//格式化y轴坐标
     if(this.value <=50) { 
       return "第一等级("+this.value+")";
     }else if(this.value >50 && this.value <=100) { 
       return "第二等级("+this.value+")"; 
     }else { 
       return "第三等级("+this.value+")";
     }
   }
 },
           plotLines:[{//标示线
             color:'red',            //线的颜色,定义为红色
             dashStyle:'longdashdot',//标示线的样式,默认是solid(实线),这里定义为长虚线
             value:100,                //定义在那个值上显示标示线,这里是在x轴上刻度为100的值处垂直化一条线
              width:2                 //标示线的宽度,2px
             }]
        },
        title: {//图表大标题
            text: '图表大标题',
            style : {
               color:'#FF2424'
              }
        },
        subtitle: {//图表小标题
            text: '图表小标题'
        },
        plotOptions: {//数据点配置,不同图形配置不一样
             column: {
              pointPadding:10,
                depth: 10,//图形在y轴上宽度(深度)
                //edgeWidth:10,//图形圆角半径
                pointWidth: 20//图形宽度
               // colorByPoint:true//同一组数据使用不同的颜色
            }
        },

        series: [{//数据


            name: 'John',//数据列名(图例)
            data: [[3,100],[0, 150], [2, -50], [1, 56.5]],//二维数组下标从0开始
            showInLegend: false // 设置为 false 即为不显示在图例中
        },
        {
            name: 'John1',
            color:'red',//本组数据的颜色
            data: [5, 7, 
            { y : 100, color : "#BF0B23"}//设置单独数据点颜色
           ,4]//数据
        },
         {
            name: 'lhy',
             //colorByPoint:true,  或者直接写在这里
            data: [12, 3, 8,9],//数据
            //lineWidth: 5,//线条宽度
            //dashStyle: 'longdash'//线条样式


        }
        ],
        
        credits:{
// enabled:true,                    // 默认值,如果想去掉版权信息,设置为false即可
text:'版权信息-渐辉科技',               // 显示的文字
href:'http://www.qqqkj.cn',   // 链接地址
position:{                          // 位置设置
//align: 'left',
//x: 400,
//y: 500,
verticalAlign: 'bottom',

},
style: {                            // 样式设置
cursor: 'pointer',
color: 'red',
fontSize: '15px'
  }
}

    });


    
});


</script>
</head>
<body>
<script src="../js/highcharts.js"></script>
<script src="../js/highcharts-3d.js"></script>
<script src="../js/modules/exporting.js"></script>


<div id="container"></div>


</body>
</html>

目录
相关文章
|
2月前
|
JavaScript 数据可视化 前端开发
echart图表
echart图表
40 0
|
9月前
|
前端开发
【前端】elementUI表格根据状态显示不同的字体颜色
【前端】elementUI表格根据状态显示不同的字体颜色
200 1
|
1月前
|
JavaScript
JS图表生成以及点击修改图表样式
JS图表生成以及点击修改图表样式
|
29天前
|
JavaScript 容器
JS图表制作及点击按钮切换图表样式
JS图表制作及点击按钮切换图表样式
16 0
|
2月前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
40 0
|
前端开发 JavaScript 容器
Echarts实战案例代码(31):模态框弹出层无法正常显示echarts图表的解决方案
Echarts实战案例代码(31):模态框弹出层无法正常显示echarts图表的解决方案
217 1
|
7月前
Echarts tooltip配置项的属性 图表悬浮框
Echarts tooltip配置项的属性 图表悬浮框
|
7月前
Echarts title标题配置项的使用 更改颜色 副标题
Echarts title标题配置项的使用 更改颜色 副标题
|
8月前
echarts下载图表按钮隐藏
echarts下载图表按钮隐藏
148 0
|
8月前
Echarts饼状图显示的颜色修改
Echarts饼状图显示的颜色修改
42 0