Question

[HighchartsImageContent_Text_Overlapping][1]


  [1]: http://i.stack.imgur.com/dUiUI.png

I am using highcharts version 3.0.1 and jquery_min.js version 1.9.1

I would like to acheive,
1) 5px of padding on each side of the tick marks 2) content should wrap up to 3 lines, and then have an ellipses 3) if there is an ellipsis, show the full name on hover, using our light blue tool tips 4) if a single word wraps across lines, add a hyphen 5) as the display resolution increases, show more of the words

Please post your solutions for resolving it..

The code i am working on is

/ 文本重叠xAxis示例代码 /

$(document).ready(function() {  
   var chart = {
      type: 'bar'
   };
   var title = {
      text: 'Historic World Population by Region'   
   };
   var subtitle = {
      text: 'Source: Wikipedia.org'  
   };
   var xAxis = {
      categories: ['Africaaaaaaaaaaaaaaaaaaaaa', 'Americaaaaaaaaaaaaaaaaaaaa', 'Asiaaaaaaaaaaaaaaaaaaaaaaaaa', 'Europeaaaaaaaaaaaaaaaaaaaa', 'Oceania'],
      title: {
         text: null
      },
      labels: {

/ 我只能看到更改的颜色其余部分没有反映 /

        style: {
            "color":"green",
            "text-overflow": 'ellipsis',
            "line-height": "1.5em",
                        "height": "4.5em",
                        "white-space":"nowrap",
                         "word-wrap": "break-word",
                         "hyphens":"auto"

        }
      }
   };
   var yAxis = {
      min: 0,
      title: {
         text: 'Population (millions)',
         align: 'high'
      },
      labels: {
         overflow: 'justify'
      }
   };
   var tooltip = {
      valueSuffix: ' millions'
   };
   var plotOptions = {
      bar: {
         dataLabels: {
            enabled: true
         }
      },
      series: {
         stacking: 'normal'
      }
   };
   var legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      x: -40,
      y: 100,
      floating: true,
      borderWidth: 1,
      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
      shadow: true
   };
   var credits = {
      enabled: false
   };

   var series= [{
         name: 'Year 1800',
            data: [107, 31, 635, 203, 2]
        }, {
            name: 'Year 1900',
            data: [133, 156, 947, 408, 6]
        }, {
            name: 'Year 2008',
            data: [973, 914, 4054, 732, 34]      
        }
   ];     

   var json = {};   
   json.chart = chart; 
   json.title = title;   
   json.subtitle = subtitle; 
   json.tooltip = tooltip;
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.series = series;
   json.plotOptions = plotOptions;
   json.legend = legend;
   json.credits = credits;
   $('#container').highcharts(json);

});

我尝试过格式化函数，

我收到的错误是，

当我使用xAxis.labels.formatter函数时，初始网页加载显示轴值，例如{0,0.5,1,1.5,2,2.5 .....}而不是类别名称。
我在xAxis.labels.style中定义了textOverflow：省略号，但文本仍然在显示中重叠。

Answer 1

我是使用Highcharts的新手。

我正在处理的代码：

$(document).ready(function() {  
   var chart = {
      type: 'column'
   };
   var title = {
      text: 'Stacked column chart'   
   };    
   var xAxis = {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
   };
   var yAxis ={
      min: 0,
      title: {
        text: 'Total fruit consumption'
      },
      stackLabels: {
        enabled: true,
        style: {
           fontWeight: 'bold',
           color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
   };
   var legend = {
      align: 'right',
      x: -30,
      verticalAlign: 'top',
      y: 25,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
      borderColor: '#CCC',
      borderWidth: 1,
      shadow: false
   };   
   var tooltip = {
      formatter: function () {
         return '<b>' + this.x + '</b><br/>' +
            this.series.name + ': ' + this.y + '<br/>' +
            'Total: ' + this.point.stackTotal;
      }
   };
   var plotOptions = {
      column: {
         stacking: 'normal',
         dataLabels: {
            enabled: true,
            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
            style: {
               textShadow: '0 0 3px black'
            }
         }
      }
   };
   var credits = {
      enabled: false
   };
   var series= [{
        name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]      
   }];     

   var json = {};   
   json.chart = chart; 
   json.title = title;   
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.legend = legend;
   json.tooltip = tooltip;
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $('#container').highcharts(json);

});

首先，我试图避免重叠。

对于我申请的xAxis标签：

formatter = function() {

  var lt = this.value;
  if (lt.length > 8) {

    // console.log(lt.substr(0,4));
    var temp = this.value.substr(0, 6);
    var temp2 = this.value.substr(6, 6);
    var temp3 = this.value.substr(12, 6);
    return '<div class="xLabels"  title="' + this.value + '">' + temp + '<br>' + temp2 + '<br>' + temp3 + '</div>';
  } else {
    return this.value;


  }
}

但它对我不起作用

Highcharts：如何将样式应用于x轴标签？

1 个答案: