Javascript Amcharts-尝试在较低屏幕宽度中创建顶部和底部值轴时出错

我正试图使Amcharts柱形图旋转，并成为一个水平条形图在较小的屏幕宽度。我想要两个值轴-移动屏幕中的顶部和底部（小于600px）

我试图将此代码添加到响应部分的Amcharts javascript API中，但它不起作用，并且给出了错误-

,
        "valueAxes": [{
    "position": "top"
  },{
    "position": "bottom
  }
  ],

这是我的片段-

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/"
}, {
“国家”：“日本”，
“访问”：1809年，
“hiddenvalue”：3025，
“颜色”：“FF9E01”，
“url”：”https://codepen.io/"
}, {
“国家”：“德国”，
“访问”：1322次，
“hiddenvalue”：3025，
“颜色”：“FCD202”，
“url”：”https://codepen.io/"
}, {
“国家”：“英国”，
“访问”：1122次，
“hiddenvalue”：3025，
“颜色”：“F8FF01”，
“url”：”https://codepen.io/"
}, {
“国家”：“法国”，
“访问”：1114，
“hiddenvalue”：3025，
“颜色”：“B0DE09”，
“url”：”https://codepen.io/"
}, {
“国家”：“印度”，
“访问”：984，
“hiddenvalue”：3025，
“颜色”：“04D215”，
“url”：”https://codepen.io/"
}, {
“国家”：“西班牙”，
“访问”：711，
“hiddenvalue”：3025，
“颜色”：“0D8ECF”，
“url”：”https://codepen.io/"
}, {
“国家”：“荷兰”，
“访问”：665次，
“hiddenvalue”：3025，
“颜色”：“0D52D1”，
“url”：”https://codepen.io/"
}, {
“国家”：“俄罗斯”，
“访问”：580，
“hiddenvalue”：3025，
“颜色”：“2A0CD0”，
“url”：”https://codepen.io/"
}, {
“国家”：“韩国”，
“访问”：443，
“hiddenvalue”：3025，
“颜色”：“8A0CCF”，
“url”：”https://codepen.io/"
}, {
“国家”：“加拿大”，
“访问”：441，
“hiddenvalue”：3025，
“颜色”：“CD0D74”，
“url”：”https://codepen.io/"
}],
“响应性”：{
“启用”：正确，
“规则”：[{
“最大宽度”：600，
“覆盖”：{
“旋转”：正确，
“creditsPosition”：“右下角”，
“列间距”：5，
“minMarginLeft”：38，
“深度3D”：0，
“角度”：0，
“图表”：[{
“隐藏”：假
}, {
“列宽”：1
}],
“传奇”：{
“启用”：正确，
“useGraphSettings”：正确，
“标签文本”：“国家”，
“字体大小”：14
},
“价值轴”：[{
“位置”：“顶部”
}
],
“分类法”：{
“labelsEnabled”：错误，
“滴答声长度”：0
}
}
}]
},
“价值轴”：[{
“axisAlpha”：0，
“位置”：“左”，
“职务”：“参观人数”
}],
“起始持续时间”：1，
“图表”：[{
“标签文本”：“[[类别]]”，
“标签位置”：“内部”，
“id”：“仅标签”，
“showBalloon”：假，
“fillAlphas”：0，
“lineAlpha”：0，
“隐藏”：true，//对于较大的屏幕尺寸，默认情况下隐藏
“列宽”：，
“visibleInLegend”：错误，
“showAllValueLabels”：正确，
“类型”：“列”，
“url字段”：“url”，
“urlTarget”：“空白”，
“valueField”：“hiddenvalue”，//使用隐藏值使标签可单击
“includeInMax”：false//确保图形在缩放时不会影响值轴最小值/最大值。
}, {
“文本”：“[[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”）；
}
}]
},
“出口”：{
“已启用”：真
}
});
document.getElementById（'resize'）。addEventListener（'click'，函数（e）{
如果（e.currentTarget.dataset.resized==“否”）{
document.getElementById（“chartdiv”）.style.width=“500px”；
e、 currentTarget.dataset.resized=“是”；
}否则{
document.getElementById（“chartdiv”）.style.width=“100%”；
e、 currentTarget.dataset.resized=“否”；
}
});
#chartdiv{
宽度：100%；
高度：500px；
}
g、 amcharts类别轴tspan{
光标：指针；
}
g、 amcharts类别轴文本。amcharts-axis-label tspan:悬停，
g、 amcharts仅图形标签文本tspan{
文字装饰：下划线；
填充物：红色；
}
text.amcharts-axis-title{
字体大小：13px；
}

调整图表大小
错误消息提示出了什么问题：
为对象数组属性：valueAxes指定了太多基于索引的重写“
。基本上，当规则被触发时，响应插件不能创建额外的值轴（或任何其他属性），它只能修改图表中当前存在的属性。这意味着您需要在图表创建时在配置中定义第二个值轴，以便在宽度规则中修改第二个值轴。此外，值轴必须至少与一个图形关联才能可见，并且不能通过属性将图形指定给多个值轴。这意味着您需要另一个隐藏的图形，仅用于第二个轴。注意哟
  "valueAxes": [{
    "axisAlpha": 0,
    "position": "left",
    "title": "No. of Visitors"
  }, { //second axis to toggle on smaller screen sizes.
    "id": "second",
    "includeHidden": false
  }],

  "graphs": [
  // other graphs omitted
  {
    //invisible graph for the second axis
    "fillAlphas": 0,
    "lineAlpha": 0,
    "hidden": true,
    "visibleInLegend": false,
    "showBalloon": false,
    "valueField": "visits",
    "valueAxis": "second"
  }]

  "responsive": {
    // ...
    "rules": [{
      // ...
      "overrides": {
        // ...
        "valueAxes": [{
          "position": "top"
        }, {
          "position": "bottom",
          "includeHidden": true
        }]
      }
    }]
  }