highcharts 绘制柱状图

最新推荐文章于 2021-12-14 14:19:20 发布

book2016

最新推荐文章于 2021-12-14 14:19:20 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zzz_781111/article/details/12977199

本文介绍了一种使用Highcharts库创建图表的方法，并提供了一个具体的配置示例，包括颜色方案、图表样式、轴线设置等。通过这个示例，读者可以了解到如何定制Highcharts图表的主题风格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
/**
 * Grid theme for Highcharts JS
 * @author Torstein Hønsi
 */

Highcharts.theme = {
   colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
   chart: {
      backgroundColor: {
         linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
         stops: [
            [0, 'rgb(255, 255, 255)'],
            [1, 'rgb(240, 240, 255)']
         ]
      },
      borderWidth: 2,
      plotBackgroundColor: 'rgba(255, 255, 255, .9)',
      plotShadow: true,
      plotBorderWidth: 1
   },
   title: {
      style: {
         color: '#000',
         font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
      }
   },
   subtitle: {
      style: {
         color: '#666666',
         font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
      }
   },
   xAxis: {
      gridLineWidth: 1,
      lineColor: '#000',
      tickColor: '#000',
      labels: {
         style: {
            color: '#000',
            font: '11px Trebuchet MS, Verdana, sans-serif'
         }
      },
      title: {
         style: {
            color: '#333',
            fontWeight: 'bold',
            fontSize: '12px',
            fontFamily: 'Trebuchet MS, Verdana, sans-serif'

         }
      }
   },
   yAxis: {
      minorTickInterval: 'auto',
      lineColor: '#000',
      lineWidth: 1,
      tickWidth: 1,
      tickColor: '#000',
      labels: {
         style: {
            color: '#000',
            font: '11px Trebuchet MS, Verdana, sans-serif'
         }
      },
      title: {
         style: {
            color: '#333',
            fontWeight: 'bold',
            fontSize: '12px',
            fontFamily: 'Trebuchet MS, Verdana, sans-serif'
         }
      }
   },
   legend: {
      itemStyle: {
         font: '9pt Trebuchet MS, Verdana, sans-serif',
         color: 'black'

      },
      itemHoverStyle: {
         color: '#039'
      },
      itemHiddenStyle: {
         color: 'gray'
      }
   },
   labels: {
      style: {
         color: '#99b'
      }
   },

   navigation: {
      buttonOptions: {
         theme: {
            stroke: '#CCCCCC'
         }
      }
   }
};

// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
</script>
<script type="text/javascript">
	function genbar(bar_id,bar_title,x_title,y_title,bar_data)
	{
    barchart = new Highcharts.Chart({
            chart: {
                renderTo: bar_id,type: 'bar', 
                shadow: true 
            },
    
            title: {
                text: bar_title
            }, 
            xAxis: {
                categories:x_title ,
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: y_title,
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                },

            },
            tooltip: {
				valueSuffix: ' millions',
                formatter: function() {
                    return ''+
                        this.series.name +': '+ this.y  ;
                }
            },
            plotOptions: {
		 
                bar: {
                    dataLabels: {
                        enabled: true, 
                        formatter: function() {
                           return  this.y ;
                        }
                    },
                          events: {
                                  click: function(e) {
                                 //    alert(e.point.y); 
                                 
                                    
                                  }
                                }
                }
            },
          legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -20,
                y: 40,
                floating: true,
                borderWidth: 1,
                backgroundColor: '#FFFFFF',
                shadow: true
            },
            credits: {
                enabled: false
            },
              series: bar_data 
        });
        		
	}

(function($){ // encapsulate jQuery

	$(function () {
		
		var barchart;
		$(document).ready(function() {
			x_title = ['8月','9月'  ];
			bar_data = [ {  name: '数据1', data:[3,333] }, {  name: '数据2', data:[4,30] },{  name: '数据3', data:[33,32] },];
		   
			genbar('barcontainer','机房:xxxxxxxxx',x_title,'下载速度',bar_data);
		
		});
		
	});
})(jQuery);
</script> 
 

 <div id="barcontainer" style=" width: 800px; height: 250px;  "></div>