2017-01-27 93 views
0

请参阅代码。 Y轴上的值显示距离Y轴太远。我试图让它们靠得更近,但整个图形变得扭曲。我很感激关于如何实现这一点的任何想法。由于事先Highcharts - 如何将值更接近Y轴

//Grafica 1 
 
$(function() { 
 
    Highcharts.chart('grafica1', { 
 
     chart: { 
 
      type: 'area', 
 
     }, 
 
     title: { 
 
      text: ' ' 
 
     }, 
 
     xAxis: { 
 
      categories: ['1350', '1400', '1450', '1500', '1550', '1699', '1750'], 
 
      tickmarkPlacement: 'on', 
 
      title: { 
 
       enabled: false 
 
      } 
 
     }, 
 
     yAxis: { 
 
      title: { 
 
       text: 'Percent' 
 
      } 
 
     }, 
 
     tooltip: { 
 
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>', 
 
      split: true 
 
     }, 
 
     plotOptions: { 
 
      area: { 
 
       stacking: 'percent', 
 
       lineColor: '#ffffff', 
 
       lineWidth: 1, 
 
       marker: { 
 
        lineWidth: 1, 
 
        lineColor: '#ffffff' 
 
       } 
 
      } 
 
     }, 
 
      series: [{ 
 
      name: 'Africa', 
 
      data: [502, 635, 809, 947, 1402, 3634, 5268] 
 
     }, { 
 
      name: 'L. America', 
 
      data: [106, 107, 111, 133, 221, 767, 1766] 
 
     }, { 
 
      name: 'Oceania', 
 
      data: [163, 203, 276, 408, 547, 729, 628] 
 
     }, { 
 
      name: 'S-E. Asia', 
 
      data: [18, 31, 54, 156, 339, 818, 1201] 
 
     }, { 
 
      name: 'Japan', 
 
      data: [2, 2, 2, 6, 13, 30, 46] 
 
     }, { 
 
      name: 'China', 
 
      data: [2, 2, 2, 6, 13, 30, 46] 
 
     }, { 
 
      name: 'Near East', 
 
      data: [2, 2, 2, 6, 13, 30, 46] 
 
     }, { 
 
      name: 'Asian CIS', 
 
      data: [2, 2, 2, 6, 13, 30, 46] 
 
     }, { 
 
      name: 'Russia', 
 
      data: [2, 2, 2, 6, 13, 30, 46] 
 
     }, { 
 
      name: 'East Europe', 
 
      data: [2, 2, 2, 6, 13, 30, 46] 
 
     }, { 
 
      name: 'Central Europe', 
 
      data: [2, 2, 2, 6, 13, 30, 46] 
 
     }, { 
 
      name: 'W. Europe - Nordic', 
 
      data: [2, 2, 2, 6, 13, 30, 46] 
 
     }, { 
 
      name: 'Nordic', 
 
      data: [2, 2, 2, 6, 13, 30, 46] 
 
     }, { 
 
      name: 'N. America', 
 
      data: [2, 2, 2, 6, 13, 30, 46] 
 
     }] 
 
    }); 
 
});

+0

补充解决方案,检查 –

+0

你说的“过犹不及”,你是怎么尝试,当你“想动他们更接近”究竟为何物,具体而言,是结果,你叫“整个图扭曲了”?这些可能意味着许多事情,以及一些可能的解决方案。小提琴是演示问题和尝试解决方案的最佳方式。 – jlbriggs

+0

感谢您的帮助!下面的答案解决了我们遇到的问题。 – Bastcri

回答

0

标贴应XAXIS被添加为

labels: { 
      enabled: true, 
      formatter: function() { 
       return categories[this.value]; 
      } 
     }, 

定义类别,

var categories= ['1350', '1400', '1450', '1500', '1550', '1699', '1750']; 

Working fiddle

最后的js

$(function() { 
var categories= ['1350', '1400', '1450', '1500', '1550', '1699', '1750']; 
    Highcharts.chart('grafica1', { 
     chart: { 
      type: 'area', 
     }, 
     title: { 
      text: ' ' 
     }, 
     xAxis: { 
      labels: { 
       enabled: true, 
       formatter: function() { 
        return categories[this.value]; 
       } 
      }, 
      tickmarkPlacement: 'on', 
      title: { 
       enabled: false 
      } 
     }, 
     yAxis: { 
      title: { 
       text: 'Percent' 
      } 
     }, 
     tooltip: { 
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>', 
      split: true 
     }, 
     plotOptions: { 
      area: { 
       stacking: 'percent', 
       lineColor: '#ffffff', 
       lineWidth: 1, 
       marker: { 
        lineWidth: 1, 
        lineColor: '#ffffff', 
       } 
      } 
     }, 
      series: [{ 
      name: 'Africa', 
      data: [502, 635, 809, 947, 1402, 3634, 5268] 
     }, { 
      name: 'L. America', 
      data: [106, 107, 111, 133, 221, 767, 1766] 
     }, { 
      name: 'Oceania', 
      data: [163, 203, 276, 408, 547, 729, 628] 
     }, { 
      name: 'S-E. Asia', 
      data: [18, 31, 54, 156, 339, 818, 1201] 
     }, { 
      name: 'Japan', 
      data: [2, 2, 2, 6, 13, 30, 46] 
     }, { 
      name: 'China', 
      data: [2, 2, 2, 6, 13, 30, 46] 
     }, { 
      name: 'Near East', 
      data: [2, 2, 2, 6, 13, 30, 46] 
     }, { 
      name: 'Asian CIS', 
      data: [2, 2, 2, 6, 13, 30, 46] 
     }, { 
      name: 'Russia', 
      data: [2, 2, 2, 6, 13, 30, 46] 
     }, { 
      name: 'East Europe', 
      data: [2, 2, 2, 6, 13, 30, 46] 
     }, { 
      name: 'Central Europe', 
      data: [2, 2, 2, 6, 13, 30, 46] 
     }, { 
      name: 'W. Europe - Nordic', 
      data: [2, 2, 2, 6, 13, 30, 46] 
     }, { 
      name: 'Nordic', 
      data: [2, 2, 2, 6, 13, 30, 46] 
     }, { 
      name: 'N. America', 
      data: [2, 2, 2, 6, 13, 30, 46] 
     }] 
    }); 
});