HighChart使用注意

1.柱状图上显示数据

plotOptions: {
	column: {
		borderWidth: 0,
		dataLabels: {
			enabled: true //柱状图上显示数据
		}
	}
}

2.去掉1,2位置

//去除右下角highchart.com

 credits: {
            enabled:false
 }

 

//去除右上角图标

exporting: {
           enabled:false
}

3.修改柱状图颜色

colors:[
	'#000000','#FF0000' 
]

4.修改主题

 

    <script src="https://code.highcharts.com.cn/highcharts/themes/sand-signika.js"></script>

刷新就可以了

自定义主题参考官网

5.修改图中字体大小

注意：字体样式里除了改大小，还可以修改颜色（color），字体（fontFamily）

标题：

 title: {
		text: "重点班",
		style: {
                fontSize: '30px',
                color: 'red'   //这边是改标题的字体大小和颜色
        }
  }

图上数据：

 dataLabels: {
           enabled: true, //设置显示对应y的值
           style: {
               fontSize: "20px" //图上显示（柱状图上方）
           }
 }

y坐标系：

 yAxis: {
          min: 0,
          title: {
            text: "数量"
          },
          labels: {
            style: {
              fontSize: "69px"
            }
          }
 }

x坐标系：

 xAxis: {
         categories: [ "一班", "二班", "三班", "四班"],
         crosshair: true,
         labels: {
            style: {
              fontSize: "98px"
            }
         }
  }

y坐标系标题：

 yAxis: {
         min: 0,
         title: {
            text: "数量",
            style: {
              fontSize: "30px",
              color: "red" //改标题的字体大小和颜色
            }
        }
   }

图例：

legend: {
      itemStyle: {
          fontSize: "88px"
      }
}

6.highcharts数据标签显示在柱状图里面解决办法

  plotOptions: {
            column: {
              borderWidth: 0,
              pointWidth:50, //柱子宽度
              dataLabels: {
                crop:false,//解决问题的方法
                overflow: 'none',//解决问题的方法
                enabled: true, //设置显示对应y的值
              
  }
}