jquery - 如何格式化高位图表？

Question

我正在使用 highchart（jquery 图表库）。我用工具提示指示轴。现在我需要在各个条形图的顶部显示 y 轴值。我怎样才能做到这一点

我的示例图

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

Answer 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'
  }
}

Answer 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;
            }
         }       
    }]
});

Answer 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/////////////////////////////////////////////

    });