Javascript Amcharts-柱形图旋转到600px以下的水平条形图-样式问题

我正试图使Amcharts图表，这将是一个柱形图和移动和平板电脑屏幕宽度（小于600px）将旋转，并成为一个水平条形图

我面临以下几个问题-

由于类别标签和值栏重叠，因此该栏不可读。我希望它们是分开的，类别标签位于值栏上方，使它们更具可读性。我该怎么做

条间距非常小如何增加条间距以使其更具可读性

我不想使用Jquery，而且我对javascript还是新手。如果您能在JSFIDLE或代码片段中显示，将不胜感激

这是我的代码笔-这是我的代码片段-

var chart=AmCharts.makeChart（“chartdiv”{
“类型”：“串行”，
“主题”：“光”，
“addClassNames”：true，
“marginRight”：70，
“panEventsEnabled”：false，
“头衔”：[{
“文本”：“单击国家以查看访客详细信息”
}],
“数据提供者”：[
{
“国家”：“美国”，
“访问”：3025，
“颜色”：“FF0F00”，
“url”：”https://codepen.io/"
}, {
“国家”：“中国”，
“访问”：1882年，
“颜色”：“FF6600”，
“url”：”https://codepen.io/"
}, {
“国家”：“日本”，
“访问”：1809年，
“颜色”：“FF9E01”，
“url”：”https://codepen.io/"
}, {
“国家”：“德国”，
“访问”：1322次，
“颜色”：“FCD202”，
“url”：”https://codepen.io/"
}, {
“国家”：“英国”，
“访问”：1122次，
“颜色”：“F8FF01”，
“url”：”https://codepen.io/"
}, {
“国家”：“法国”，
“访问”：1114，
“颜色”：“B0DE09”，
“url”：”https://codepen.io/"
}, {
“国家”：“印度”，
“访问”：984，
“颜色”：“04D215”，
“url”：”https://codepen.io/"
}, {
“国家”：“西班牙”，
“访问”：711，
“颜色”：“0D8ECF”，
“url”：”https://codepen.io/"
}, {
“国家”：“荷兰”，
“访问”：665次，
“颜色”：“0D52D1”，
“url”：”https://codepen.io/"
}, {
“国家”：“俄罗斯”，
“访问”：580，
“颜色”：“2A0CD0”，
“url”：”https://codepen.io/"
}, {
“国家”：“韩国”，
“访问”：443，
“颜色”：“8A0CCF”，
“url”：”https://codepen.io/"
}, {
“国家”：“加拿大”，
“访问”：441，
“颜色”：“CD0D74”，
“url”：”https://codepen.io/"
}
],
“响应性”：{
“启用”：正确，
“规则”：[
{
“最大宽度”：600，
“覆盖”：{
“旋转”：正确，
“creditsPosition”：“右下角”，
“柱间距”：20，
“minMarginLeft”：38，
“深度3D”：0，
“角度”：0，
“传奇”：{
“启用”：正确，
“useGraphSettings”：正确，
“标签文本”：“国家”，
“字体大小”：14
},
“分类法”：{
“内在”：没错，
“字体大小”：13，
“网格位置”：“开始”，
“星光轴”：对，
“gridAlpha”：0，
“最小垂直间隙”：5
}
}
}
]
},
“价值轴”：[{
“axisAlpha”：0，
“位置”：“左”，
“职务”：“参观人数”
}],
“起始持续时间”：1，
“图表”：[{
“文本”：“[[category]]：[[value]]”，
“fillColorsField”：“color”，
“填充字母”：0.9，
“lineAlpha”：0.2，
“类型”：“列”，
“url字段”：“url”，
“urlTarget”：“空白”，
“valueField”：“访问”
}],
“深度3D”：10，
“角度”：45，
“图表光标”：{
“CategoryBallooneEnabled”：false，
“cursorAlpha”：0，
“可缩放”：错误
},
“类别字段”：“国家”，
“分类法”：{
“网格位置”：“开始”，
“classNameField”：“Ctglabel”，
“唇瓣旋转”：45，
“minHorizontalGap”：50，
“标题”：“国家”，
“urlTarget”：“空白”，
“听众”：[{
“事件”：“点击项目”，
“方法”：函数（事件）{
window.open（event.serialDataItem.dataContext.url，“u blank”）；
}
}]
},
“出口”：{
“已启用”：真
}
} );
#chartdiv{
宽度：100%；
高度：500px；
}
g、 amcharts类别轴tspan{
光标：指针；
}
g、 amcharts类别轴文本。amcharts-axis-label tspan:悬停{
文字装饰：下划线；
填充物：红色；
}
text.amcharts-axis-title{
字体大小：13px；
}
该方法基本上与其他方法相同。唯一的区别是，当响应规则生效时，您需要调整图表设置，使带有标签的“仅隐藏标签”列可见，但对于较大的屏幕尺寸，默认情况下将其隐藏

  "responsive": {
    "enabled": true,
    "addDefaultRules": false, //add this so that the value labels still appear on even smaller screens
    "rules": [{
      "maxWidth": 600,
      "overrides": {
        "rotate": true,
        "creditsPosition": "bottom-right",
        "columnSpacing": 5,
        "minMarginLeft": 38,
        "depth3D": 0,
        "angle": 0,
        "graphs": [{
           "hidden": false //reveal the label-only column chart
        }, {
           "columnWidth": 1 //make this slightly larger to help with spacing
        }],
        "legend": {
          "enabled": true,
          "useGraphSettings": true,
          "labelText": "Country",
          "fontSize": 14
        },
        "categoryAxis": {
          "labelsEnabled": false, //remove the axis label and tick 
          "tickLength": 0
        }
      }
    }]
  },
  "graphs": [{ //invisible label only graph
    "labelText": "[[category]]",
    "labelPosition": "inside",
    "showBalloon": false,    
    "fillAlphas": 0,
    "lineAlpha": 0,
    "hidden": true, //hide by default for larger screen sizes
    "columnWidth": .6,
    "visibleInLegend": false,
   "showAllValueLabels": true, 
    "type": "column",
    "valueField": "visits"
  },
  // ...

编辑

要保留在取出类别轴标签时删除的链接标签单击，需要将
urlField
和
urlTarget
添加到不可见图形中。由于底层SVG的结构，您不能在标签文本上具有相同的悬停效果，但可以通过CSS将它们设置为红色并在默认情况下加下划线。您还需要使隐藏图形使用足够大的值，以便标签占用的空间可以单击。一个好的选择是使用数据集中的最大值。也可以设置为false，以便隐藏值不会影响轴缩放

编辑#2-向响应插件添加了
addDefaultRules:false
。默认规则在较小的屏幕上隐藏值标签。您可以删除默认规则，也可以重新定义和覆盖取消设置的规则
showAllValueLabels

下面的演示-单击调整图表大小按钮以触发规则


var chart=AmCharts.makeChart（“chartdiv”{
“类型”：“串行”，
“主题”：“光”，
“addClassNames”：true，
“marginRight”：70，
“panEventsEnabled”：false，
“头衔”：[{
“文本”：“单击国家以查看访客详细信息”
}],
“数据提供者”：[{
“国家”：“美国”，
“访问”：3025，
“hiddenvalue”：3025，//以确保较小条的标签完全可点击
“颜色”：“FF0F00”，
“url”：”https://codepen.io/"
}, {
“国家”：“中国”，
“访问”：1882年，
“hiddenvalue”：3025，
“颜色”：“FF6600”，
“url”：”https://codepen.io/"
}, {