解决方案 »

  1.   


    /*首先你希望得到的是一个什么样的默认样式,
    在未获得数据库中数据的情况下你可以修改的无非就是
    横纵坐标轴的坐标轴的尺度(标题),以及整个图的主标题
    和副标题*/
    //给出一个例子
        <script type="text/javascript">
    <script type="text/javascript">
        //chart值对象 json数据
    var chart_value= {chart: {
                        renderTo: 'container',          //放置图表的容器
                        defaultSeriesType: 'column',    
    //图表类型line, spline, area, areaspline, column, bar, pie , scatter
                        //zoomType: 'x',                  //放大
                        inverted: false                  //左右显示,默认上下正向
                    },
    //图标的标题
                    title: {                            
                        text: 'XX百分比情况统计',         
                        style:{}                        //标题样式
                    },
                    //图标的副标题
    subtitle: {                         
                        text: '按XX统计'               
                    },
                    //X轴
    xAxis: {                            
                        categories: <%= xAxisCategories %>,//坐标值 
                        labels: {
                            rotation: -45,
                            align: 'right',
                            style: {font: 'normal 13px 宋体'}
                        }
                    },
    //Y轴
                    yAxis: {
                        min: 0,
                        title: {text: '百分比'}
     //Y轴坐标标题  labels:纵柱标尺
                    }, plotLines: [{
    //区分线或可根据项目 标出其基线 value//表示显示数值 width//显示宽 px
    value: 0,
    width: 1,
    color: '#808080',
    }]
    },
    //【图例】位置样式
                    legend: {                  
                        layout: 'horizontal',
                           //【图例】显示的样式:水平(horizontal)/垂直(vertical)
                        backgroundColor: '#FFFFFF',
                        borderColor: '#CCC',
                        borderWidth: 1,
                        align: 'center',
                        verticalAlign: 'top',//默认为底部
                        enabled:true,
                        //x: 100,
                        y: 50,
                        //floating: true,
                        shadow: true,
       width : 650,
     itemWidth : 210
                    },
    //提示信息
                    tooltip: {    
                        formatter: function() {     //当鼠标悬置数据点时的格式化提示
                            return '<b>'+ this.x +'</b><br/>'+ this.series.name + ': '+ Highcharts.numberFormat(this.y, 1);
                        }
                    },
    //划分选项
                    plotOptions: { 
                        column: {
    cursor: 'pointer',    //鼠标样式
                            pointPadding: 0.2,  //图表柱形的
                            borderWidth: 0     //图表柱形的粗细
                            },bar: {
                            dataLabels: {
                                enabled: false
                            }
                        }
                    },
                    series:<%= returnValue %>};
           //主体调用方法
             var chart;
            $(document).ready(function() {
                 chart = new Highcharts.Chart(chart_value);  
            });
    //点击按钮值的显示与否
      var flag = false;
                    function show_click()
                    {
                        if(flag == false)
                        {
                        chart_value.plotOptions={
     column: {dataLabels: {enabled: true,
                                  formatter: function() {return this.y +'小时';},
                                  y:-15} } };
                        chart = new Highcharts.Chart(chart_value);
                        flag = true;
                        }
                        else {
                        chart_value.plotOptions={
              column: {dataLabels: {enabled: false,
                                  formatter: function() {return this.y +'小时';},
                                  y:-15} } };
                        chart = new Highcharts.Chart(chart_value);
                        flag = false;
                        }
                    }
        </script>
      

  2.   

    最后确实是在后台判断取得数据为空时,返回的默认值,但是我感觉这个开源的highcharts,应该在它的设置里面有设置默认值,去官网找了一天,貌似没收获,额,我真的无语了,也许是我看的不够认真,但是我还是希望了解一下究竟有没有设置默认值这一项,算是请教一下吧,毕竟以后说不准谁还会用到
      

  3.   

    要是能显示一个类似水印的NO DATA字样就好了
      

  4.   

    setData  你看看这个方法 你先在 series data里面设置默认的数据  取到数据再用setData替换掉