如何格式化highcharts？答案

【问题标题】：How to format high charts?如何格式化highcharts？
【发布时间】：2017-01-13 06:29:47
【问题描述】：

我正在使用 highchart（jquery 图表库）。我用工具提示指示轴。现在我需要在相应栏的顶部显示 y 轴值。我该怎么做呢

我的示例图

问题：在highchart的各个条形顶部显示y轴值。

【问题讨论】：

能否贴出当前代码生成上面的图片？

标签： jquery highcharts

【解决方案1】：

Hightcharts 有一个具有所需行为的演示：

http://www.highcharts.com/demo/column-rotated-labels

这是在条形图上创建标签的代码部分：

dataLabels: {
  enabled: true,
  rotation: -90,
  color: Highcharts.theme.dataLabelsColor || '#FFFFFF',
  align: 'right',
  x: -3,
  y: 10,
  formatter: function() {
    return this.y;
  },
  style: {
    font: 'normal 13px Verdana, sans-serif'
  }
}

【讨论】：

【解决方案2】：

您正在寻找的设置在series.dataLabels：

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column'
    },
    title: {
        text: 'Category View'
    },
    xAxis: {
        categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5']
    },
    yAxis: {
        title: {
            text: 'Views'
        }
    },
    series: [{
        name: 'Number of Visits',
        data: [5, 3, 4, 7, 2],
        dataLabels: {
            enabled: true,
            formatter: function() {
               return this.y;
            }
         }       
    }]
});

【讨论】：

【解决方案3】：

我的最终解决方案是针对我预期的图表

        var chart;

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'faq_view_graph',
                defaultSeriesType: 'column'
            },
            title: {
                text: 'Category View'
            },
            xAxis: {
                categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5', 'Category6', 'Category7', 'Category8', 'Category9', 'Category10'],
                title:{
                    text: 'Views'
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Category'
                }
            },
            tooltip: {
                enabled: true,
                formatter: function() {
                    return ''+this.series.name +': '+ this.y;
                }
            },
            point: {
                events: {
                    click: function() {
                        alert('check');
                    }
                }
            },

///////////////////////////////////////////////////////////////////////////////
          plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                alert ('Category: '+ this.x +', value: '+ this.y);
                            }
                        }
                    }
                }
            },


///////////////////////////////////////////////////////////////////////////////



                series: [{
                name: 'Number of visits',
                data: [5, 3, 4, 10, 2, 19, 56, 23, 21, 70],
        //Codes to display value on top of each bar
            dataLabels: {
                enabled: true,
                rotation: 0,
                color: '#FFFFFF',
                align: 'right',
                x: -3,
                y: 10,
                formatter: function() {
                    return this.y;
                },
                style: {
                    font: 'normal 13px Verdana, sans-serif'
                }
            }
            }]
        });
//////////////////////////////Graph/////////////////////////////////////////////

    });

【讨论】：