Question

我正在尝试创建一个条形图，其中列数很少，其标签应显示该列的名称。

请参阅小提琴 - http://jsfiddle.net/akshayasharma/cdweowtq/3/

$(function () {
    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Tokyo',
            data: [{y: 49.9}]

        }, {
            name: 'New York',
             data: [{y: 83.6}]

        }]
    });
});

我想将我的第一个专栏标记为“东京＆＃39;这显示了东京和其他地区的价值观，纽约＆＃39;这显示了纽约＆＃39;

的价值

Answer 1

一种选择是使用dateLabels并在数据系列中添加name：http://jsfiddle.net/cdweowtq/5/

Answer 2

您可以通过多种方式进行设置，具体取决于“标签”的含义。

在这种情况下，我假设你的意思是x轴标签。

实现此目的的一种简单方法是将类别名称提供给x轴，如下所示：

xAxis: {
  crosshair: true,
  categories: ['Tokyo', 'New York']
}

然后简化你的系列结构，如下所示：

series: [{
  name: 'Rainfall',
  data: [49.9, 83.6]
}]

小提琴：

http://jsfiddle.net/jlbriggs/ks7g1bo9/2/

为了保持现在示例中的颜色设置，您可以使系列更复杂，如下所示：

 xAxis: {
   crosshair: true,
   type: 'category'
 },
 series: [{
   name: 'Rainfall',
   data: [{
     name: 'Tokyo',
     y: 49.9,
     color: Highcharts.getOptions().colors[0]
   }, {
     name: 'New York',
     y: 83.6,
     color: Highcharts.getOptions().colors[1]
   }]
 }]

小提琴：

http://jsfiddle.net/jlbriggs/ks7g1bo9/1

这只是设置此功能的众多方法中的两种，哪种方式取决于您需要的具体内容。

条形图标签

2 个答案: