Highcharts 中文社区

Highcharts 中文社区 门户 HC 学院 查看内容

基础问答

2017-4-6 13:51| 发布者: 彭芳| 查看: 1476| 评论: 0|来自: 各类网站

摘要: 1、X轴文字如何倾斜 xAxis: { labels: { rotation: -90 //竖直放 rotation: -45 //45度倾斜 } } 2、在plotOptions里,如何设置柱形图的宽度和边框, plotOptions: { column: { pointWidth: 30, //设置柱形的 ...

1、X轴文字如何倾斜

xAxis: {

    labels: {

        rotation: -90 //竖直放   

        rotation: -45 //45度倾斜   

    }

}

2、plotOptions里,如何设置柱形图的宽度和边框, 

plotOptions: {

    column: {

        pointWidth: 30,      //设置柱形的宽度   

        borderWidth: 0      //设置柱子的边框,默认是1   

    }

}, 
3、柱形图柱子的颜色,统一设置与分开设置方法

  • 统一设置:<span style="color:#E53333;"></span>//统一设置,可以在highcharts.js里设置默认值,也可以针对一个柱形图来设置   

series: [{

    color: '#f00',

    //柱形图颜色统一设为红色   

    data: [11, 12, 13, 14, 15, 16, 17]

}] 

  • 分开设置:分开设置,每个柱子颜色不一样,需要把颜色值存到数据库里   

   series: [{   

                  data: [{'color':'#F6BD0F','y':11},   

                            {'color':'#AFD8F8','y':12},   

                            {'color':'#8BBA00','y':13},   

                             {'color':'#FF8E46','y':14},   

                             {'color':'#008E8E','y':15},   

                             {'color':'#D64646','y':16},   

                            {'color':'#8E468E','y':17}],   

              }]    

4、如何设置Y轴的值不显示小数、负数,且按固定数值来等分

 yAxis: {    
       min: 0,                  //不显示负数    
     allowDecimals:false,     //不显示小数    
        tickInterval: 1         //Y轴值按1来等分    
   }    
5、柱形图每个Y轴值显示柱子上的位置

series: [{

    data: [11, 12, 13, 14, 15, 16, 17],

    dataLabels: {

        enabled: true,        //默认是false,即默认不显示数值   

        color: '#666',        //字体颜色   

        align: 'center'     //居柱子中间   

    }

}]

//显示在柱子上   

//在上面基础上再加一个属性,y:20,就是设置数值显示的位置 

  6、图例如何显示在右侧

legend: {   

layout:'vertical',         //竖直显示,默认是水平显示的   

align: 'right',            //图例说明在区域的右边,默认在中间   

verticalAlign: 'middle'    //竖直方向居中,默认在底部   

}

7、 如何让highcharts图表显示横向yAxis和纵向xAxis网格线

xAxis: {

            gridLineColor: '#197F07',

            gridLineWidth: 1

},

 yAxis: {

      gridLineColor: '#197F07',

      gridLineWidth: 2

},

8、如何设置highcharts图表坐标刻度字体样式

xAxis: {

    lineWidth: 1,

    lineColor: "#1a96ef",

    tickWidth: 0,

    labels: {

        y: 20,        //x轴刻度往下移动20px

        style: {

            color: '#19a0f5',            //颜色

            fontSize: '14px' //字体

        }

    },

    categories: ['One', 'Two', 'three']

},

9、如何将div上的highchart置于底层

div.menu ul li a,

div.menu ul li a: visited

{

    background - color: #465c71;

    border: 1px#4e667d solid;

    color: #dde4ec;

    display: block;

    line - height: 1.35em;

    padding: 4px 20px;

    text - decoration: none;

10.、如何获取 highchart 中选定点的 index · Ruby China

$(function() {

    $('#container').highcharts({

        chart: {

},

        xAxis: {

            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

        },

        tooltip: {

            formatter: function() {

                var s = '<b>' + this.x + '</b>';

                $.each(this.points,

                function(i, point) {

                    alert(i); s += '<br/>' + point.series.name + ': ' +point.y + 'm';

                });

                return s;

            },

            shared: true

        },

        series: [{

            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        },

        {

            data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]

        }]

    });

});

11、控制highcharts alignticks

alignTicks默认设置为true

$(function() {

    $('#container').highcharts({

        chart: {            //alignTicks: false,

            type: 'line'

        },

        xAxis: {

            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

        },

        yAxis: [{

            title: {

                text: 'Primary Axis'

            },

            gridLineWidth: 0

        },

        {

            title: {

                text: 'Secondary Axis'

            },

            opposite: true

        }],

        legend: {

            layout: 'vertical',

            backgroundColor: '#FFFFFF',

            floating: true,

            align: 'left',

            x: 100,

            verticalAlign: 'top',

            y: 70

        },

        tooltip: {

            formatter: function() {

                return '<b>' + this.series.name + '</b><br>' +this.x + ': ' + this.y;

            }

        },

        plotOptions: {

},

        series: [{

            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        },

        {

            data: [129.9, 271.5, 306.4, 29.2, 544.0, 376.0, 435.6, 348.5, 216.4, 294.1, 35.6, 354.4],

            yAxis: 1

        }]

    });

});

12、 highcharts 柱状图如果有负数要怎么显示

yAxis: {

    allowDecimals: 'false',    //控制数轴是否显示小数。

    min: 0,    //控制数轴的最小值

    max: 10000,    //控制数轴的最大值

}

最大值自己可以调,也可以不写最大值

13、如何设置highcharts柱状图区域点击事件

columnpoint中添加click事件

plotOptions: {

    column: {

        cursor: 'pointer',

        point: {

            events: {

                click: function() { //添加跳转代码

                }

            }

        },

        ………………

    }

}

}

14、图表反转

reversed:图表反转,即 Chart.reversed,当其值设置为true时,x轴和y轴显示的位置对调。

具体写法:reversed:true,

15highcharts如何实现拖动点带动线拖动

plotOptions: {

    line: {

        dateGrouping: {

            enbaled: false

        }

    },

    series: {

        cursor: 'pointer',

        allowPointSelect: true,

        events: {

            legendItemClick: lengedItemFun

        },

        point: {

            events: {

                drag: dragFun,                //拖

                drop: dropFun //放

            }

        },

        stickyTracking: false

    }

},

series: $ {

    templist} //数据集合

});

依赖Highcharts文件draggable - points.js

16、如何给highcharts柱状图上方加上数据标识符

plotOptions:{

     column:{       

         shadow: false,            //不显示阴影

         dataLabels:{                //柱状图数据标签

              enabled:true,              //是否显示数据标签

              color:'#e3e3e3',        //数据标签字体颜色

              formatter: function() {        //格式化输出显示

                   return "¥" + (this.y);

               },

     } 

}

17、如何设置柱子宽度

plotOptions: {

  column: {

     pointWidth: 20

  }

}

18、如何将折线图变成柱状图

chart.series[0].update({

    type: 'column'

})

19、将图表的背景设置为透明

chart: {

    backgroundColor: null

}

20、 Highcharts如何显示横向yAxis和纵向xAxis网格线

xAxis: {

    gridLineWidth: 1

},

yAxis: {

    gridLineWidth: 1

}

  •  gridLineColor :网格线颜色值默认#C0C0C0
  •  gridLineDashStyle :网格线式默认solid实线;其范围值:

 view sourceprint ?

var dashStyles = ['Solid','ShortDash','ShortDot','ShortDashDot','ShortDashDotDot','Dot','Dash','LongDash','DashDot','LongDashDot','LongDashDotDot'

];

  • gridLineWidth:网格线宽度默认0

 21、设置横向网格线需要设置yAxis设置纵向网格线候需要设置xAxis节点

view sourceprint ?

$(function() {

    $('#container').highcharts({

        chart: {

},

        xAxis: {

            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

            gridLineColor: '#197F07',            //纵向网格线颜色

            gridLineWidth: 1                        //纵向网格线宽度

        },

        yAxis: {

            gridLineColor: '#197F07',            //横向网格线颜色

            gridLineDashStyle: 'longdash',            //横向网格线式

            gridLineWidth: 1                       //横向网格线宽度

        },

        series: [{

            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        }]

    });

});

 22、 提示框宽度如何设置最大值

plotOptions: {

    column: {

        pointPadding: 0.2,

        borderWidth: 0,

        pointWidth: 30

    }

}

23、y轴刻度显示为100k而不是100000

yAxis: [{

             title: {

                         ...

             },

             labels: {

                 ....,

                 format: '{value:.,0f}'//就这个地方设置显示格式

             }

}]

24、 如何给Highcharts图表的数据点附近添加备注信息

marker: {

    enabled: false,

    states: {

        hover: {

            enabled: true

        }

    },

    radius: 3,

    symbol: 'circle'

}

}

25、 HighCharts如何设置Y轴的刻度

  • 调整图表的宽度,越宽分配给每个值的宽度越宽
  • 设置pointWidth属性
  • 设置pointPadding也可以.

plotOptions: {

    column: {

        pointPadding: 0.2,

        pointWidth: 30 //柱子的宽度30px

    }

}

26、 Highcharts去掉或者隐藏掉y轴的刻度线

yAxis : {

    gridLineWidth: 0

}

27、如何控制highcharts的图例不切换不允许点击

plotOptions: {

    areaspline: {

        fillOpacity: 0.5

    },

    series: {

        events: {            //控制图标图例legend允许切换

            legendItemClick: function(event) {

                return false; //return  true 则表示允许切换

            }

        }

    }

},

28、 highcharts如何设置折线图的线条变平滑、改变颜色、线条变粗细

  • 変平滑请设置typespline

chart: {

    type: 'spline'

}

  • 颜色请设置 colors

colors: {

    'red',    '#ff0000',    ...

}

  • 线条粗细设置:plotOptions.series.lineWidth

29、Highcharts legend字体大小设置

legend: {

    itemStyle: {

        'fontSize': '18px'

    }

}

30、highcharts图表的图例改变显示位置

A:将图例Legend放于图表右侧

  • 设置chartmarginRight属性值

chart: {

    marginRight: 120

},

  • 设置legend图例属性值如下

legend: {

    align: 'right',    //水平方向位置

    verticalAlign: 'top',    //垂直方向位置

    x: 0,    //距离x轴的距离

    y: 100 //距离Y轴的距离

},

B:将图例放于图表左上角

legend: {

    align: 'left',    //水平方向位置

    verticalAlign: 'top',    //垂直方向位置

    x: 0,    //距离x轴的距离

    y: 0 //距离Y轴的距离

},

C:将图例放于图表上方中央
legend: {

    align: 'center',    //水平方向位置

    verticalAlign: 'top',    //垂直方向位置

    x: 0,    //距离x轴的距离

    y: 20 //距离Y轴的距离

},

D、将图例放于下方中央

  • 设置legend属性如下

legend: {

            align: 'center', //水平方向位置

            verticalAlign: 'bottom', //垂直方向位置

            x: 0, //距离x轴的距离

            y: 0 //距离Y


路过

雷人

握手
7

鲜花

鸡蛋

刚表态过的朋友 (7 人)

最新评论