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

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

我正在尝试将此代码添加到响应部分的Amcharts javascript API中，但无法正常工作并给出错误-

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

这是我的摘录-

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "addClassNames": true,
  "marginRight": 70,
  "panEventsEnabled": false,
  "titles": [{
    "text": "Click on Country to see Visitor details"
  }],
  "dataProvider": [{
    "country": "USA",
    "visits": 3025,
    "hiddenvalue": 3025, // to ensure that the smaller bars' labels are fully clickable
    "color": "#FF0F00",
    "url": "https://codepen.io/"
  }, {
    "country": "China",
    "visits": 1882,
    "hiddenvalue": 3025,
    "color": "#FF6600",
    "url": "https://codepen.io/"
  }, {
    "country": "Japan",
    "visits": 1809,
    "hiddenvalue": 3025,
    "color": "#FF9E01",
    "url": "https://codepen.io/"
  }, {
    "country": "Germany",
    "visits": 1322,
    "hiddenvalue": 3025,
    "color": "#FCD202",
    "url": "https://codepen.io/"
  }, {
    "country": "UK",
    "visits": 1122,
    "hiddenvalue": 3025,
    "color": "#F8FF01",
    "url": "https://codepen.io/"
  }, {
    "country": "France",
    "visits": 1114,
    "hiddenvalue": 3025,
    "color": "#B0DE09",
    "url": "https://codepen.io/"
  }, {
    "country": "India",
    "visits": 984,
    "hiddenvalue": 3025,
    "color": "#04D215",
    "url": "https://codepen.io/"
  }, {
    "country": "Spain",
    "visits": 711,
    "hiddenvalue": 3025,
    "color": "#0D8ECF",
    "url": "https://codepen.io/"
  }, {
    "country": "Netherlands",
    "visits": 665,
    "hiddenvalue": 3025,
    "color": "#0D52D1",
    "url": "https://codepen.io/"
  }, {
    "country": "Russia",
    "visits": 580,
    "hiddenvalue": 3025,
    "color": "#2A0CD0",
    "url": "https://codepen.io/"
  }, {
    "country": "South Korea",
    "visits": 443,
    "hiddenvalue": 3025,
    "color": "#8A0CCF",
    "url": "https://codepen.io/"
  }, {
    "country": "Canada",
    "visits": 441,
    "hiddenvalue": 3025,
    "color": "#CD0D74",
    "url": "https://codepen.io/"
  }],
  "responsive": {
    "enabled": true,
    "rules": [{
      "maxWidth": 600,
      "overrides": {
        "rotate": true,
        "creditsPosition": "bottom-right",
        "columnSpacing": 5,
        "minMarginLeft": 38,
        "depth3D": 0,
        "angle": 0,
        "graphs": [{
          "hidden": false
        }, {
          "columnWidth": 1
        }],
        "legend": {
          "enabled": true,
          "useGraphSettings": true,
          "labelText": "Country",
          "fontSize": 14
        },
        "valueAxes": [{
    "position": "top"
  }
  ],
        "categoryAxis": {
          "labelsEnabled": false,
          "tickLength": 0
        }
      }
    }]
  },
  "valueAxes": [{
    "axisAlpha": 0,
    "position": "left",
    "title": "No. of Visitors"
  }],
  "startDuration": 1,
  "graphs": [{
    "labelText": "[[category]]",
    "labelPosition": "inside",
    "id": "label-only",
    "showBalloon": false,
    "fillAlphas": 0,
    "lineAlpha": 0,
    "hidden": true, //hide by default for larger screen sizes
    "columnWidth": .6,
    "visibleInLegend": false,
    "showAllValueLabels": true,
    "type": "column",
    "urlField": "url",
    "urlTarget": "_blank",
    "valueField": "hiddenvalue", //use hidden value to make labels clickable
    "includeInMinMax": false //make sure the graph doesn't affect the value axis min/max when zooming.
  }, {
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillColorsField": "color",
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "urlField": "url",
    "urlTarget": "_blank",
    "valueField": "visits"
  }],
  "depth3D": 10,
  "angle": 45,
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "classNameField": "Ctglabel",
    "labelRotation": 45,
    "minHorizontalGap": 50,
    "title": "Country",
    "urlTarget": "_blank",
    "listeners": [{
      "event": "clickItem",
      "method": function(event) {
        window.open(event.serialDataItem.dataContext.url, '_blank');
      }
    }]
  },
  "export": {
    "enabled": true
  }
});

document.getElementById('resize').addEventListener('click', function(e) {
  if (e.currentTarget.dataset.resized === "no") {
    document.getElementById("chartdiv").style.width = "500px";
    e.currentTarget.dataset.resized = "yes";
  } else {
    document.getElementById("chartdiv").style.width = "100%";
    e.currentTarget.dataset.resized = "no";
  }
});

#chartdiv {
  width: 100%;
  height: 500px;
}

g.amcharts-category-axis tspan {
  cursor: pointer;
}

g.amcharts-category-axis text.amcharts-axis-label tspan:hover,
g.amcharts-graph-label-only text tspan {
  text-decoration: underline;
  fill: red;
}

text.amcharts-axis-title {
  font-size: 13px;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/plugins/responsive/responsive.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<button id="resize" data-resized="no">Resize chart</button>
<div id="chartdiv"></div>

最佳答案

错误消息提示出了什么问题："too many index-based overrides specified for object array property: valueAxes"。基本上，响应式插件在触发规则时无法创建其他值轴（或任何其他属性），并且只能修改图表中当前存在的属性。这意味着您需要在创建图表时在配置中定义第二个值轴，以便可以在宽度规则中修改第二个值轴。此外，值轴必须与至少一个图相关联才能可见，并且您不能通过valueAxis属性将图分配给多个值轴。这意味着您仅需要第二个轴的另一个隐藏图。请注意，您不能使用标签图，因为它不会在可见条的顶部显示标签。

这是您需要进行的更改的概述。

1）在makeChart中添加第二个值轴，将includeHidden设置为false，以使其不会在非旋转视图中呈现。您还需要设置其id，以便可以将其分配给图形对象。

  "valueAxes": [{
    "axisAlpha": 0,
    "position": "left",
    "title": "No. of Visitors"
  }, { //second axis to toggle on smaller screen sizes.
    "id": "second",
    "includeHidden": false
  }],

2）在valueAxis属性中添加一个引用第二个轴ID的不可见图形：

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

3）修改您的valueAxes响应规则，并将第二个值轴的includeHidden属性设置为true，以便在调整大小时显示：

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

演示：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "addClassNames": true,
  "marginRight": 70,
  "panEventsEnabled": false,
  "titles": [{
    "text": "Click on Country to see Visitor details"
  }],
  "dataProvider": [{
    "country": "USA",
    "visits": 3025,
    "hiddenvalue": 3025, // to ensure that the smaller bars' labels are fully clickable
    "color": "#FF0F00",
    "url": "https://codepen.io/"
  }, {
    "country": "China",
    "visits": 1882,
    "hiddenvalue": 3025,
    "color": "#FF6600",
    "url": "https://codepen.io/"
  }, {
    "country": "Japan",
    "visits": 1809,
    "hiddenvalue": 3025,
    "color": "#FF9E01",
    "url": "https://codepen.io/"
  }, {
    "country": "Germany",
    "visits": 1322,
    "hiddenvalue": 3025,
    "color": "#FCD202",
    "url": "https://codepen.io/"
  }, {
    "country": "UK",
    "visits": 1122,
    "hiddenvalue": 3025,
    "color": "#F8FF01",
    "url": "https://codepen.io/"
  }, {
    "country": "France",
    "visits": 1114,
    "hiddenvalue": 3025,
    "color": "#B0DE09",
    "url": "https://codepen.io/"
  }, {
    "country": "India",
    "visits": 984,
    "hiddenvalue": 3025,
    "color": "#04D215",
    "url": "https://codepen.io/"
  }, {
    "country": "Spain",
    "visits": 711,
    "hiddenvalue": 3025,
    "color": "#0D8ECF",
    "url": "https://codepen.io/"
  }, {
    "country": "Netherlands",
    "visits": 665,
    "hiddenvalue": 3025,
    "color": "#0D52D1",
    "url": "https://codepen.io/"
  }, {
    "country": "Russia",
    "visits": 580,
    "hiddenvalue": 3025,
    "color": "#2A0CD0",
    "url": "https://codepen.io/"
  }, {
    "country": "South Korea",
    "visits": 443,
    "hiddenvalue": 3025,
    "color": "#8A0CCF",
    "url": "https://codepen.io/"
  }, {
    "country": "Canada",
    "visits": 441,
    "hiddenvalue": 3025,
    "color": "#CD0D74",
    "url": "https://codepen.io/"
  }],
  "responsive": {
    "enabled": true,
    "addDefaultRules": false,
    "rules": [{
      "maxWidth": 600,
      "overrides": {
        "rotate": true,
        "creditsPosition": "bottom-right",
        "columnSpacing": 5,
        "minMarginLeft": 38,
        "depth3D": 0,
        "angle": 0,
        "graphs": [{
          "hidden": false
        }, {
          "columnWidth": 1
        }],
        "legend": {
          "enabled": true,
          "useGraphSettings": true,
          "labelText": "Country",
          "fontSize": 14
        },
        "categoryAxis": {
          "labelsEnabled": false,
          "tickLength": 0
        },
        "valueAxes": [{
          "position": "top"
        }, {
          "position": "bottom",
          "includeHidden": true
        }]
      }
    }]
  },
  "valueAxes": [{
    "axisAlpha": 0,
    "position": "left",
    "title": "No. of Visitors"
  }, {
    "id": "second",
    "includeHidden": false
  }],
  "startDuration": 1,
  "graphs": [{
    "labelText": "[[category]]",
    "labelPosition": "inside",
    "id": "label-only",
    "showBalloon": false,
    "fillAlphas": 0,
    "lineAlpha": 0,
    "hidden": true, //hide by default for larger screen sizes
    "columnWidth": .6,
    "visibleInLegend": false,
    "showAllValueLabels": true,
    "type": "column",
    "urlField": "url",
    "urlTarget": "_blank",
    "valueField": "hiddenvalue", //use hidden value to make labels clickable
    "includeInMinMax": false //make sure the graph doesn't affect the value axis min/max when zooming.
  }, {
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillColorsField": "color",
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "urlField": "url",
    "urlTarget": "_blank",
    "valueField": "visits"
  }, {
    //invisible graph for the second axis
    "fillAlphas": 0,
    "lineAlpha": 0,
    "hidden": true,
    "visibleInLegend": false,
    "showBalloon": false,
    "valueField": "visits",
    "valueAxis": "second"
  }],
  "depth3D": 10,
  "angle": 45,
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "classNameField": "Ctglabel",
    "labelRotation": 45,
    "minHorizontalGap": 50,
    "title": "Country",
    "urlTarget": "_blank",
    "listeners": [{
      "event": "clickItem",
      "method": function(event) {
        window.open(event.serialDataItem.dataContext.url, '_blank');
      }
    }]
  },
  "export": {
    "enabled": true
  }
});

document.getElementById('resize').addEventListener('click', function(e) {
  if (e.currentTarget.dataset.resized === "no") {
    document.getElementById("chartdiv").style.width = "500px";
    e.currentTarget.dataset.resized = "yes";
  } else {
    document.getElementById("chartdiv").style.width = "100%";
    e.currentTarget.dataset.resized = "no";
  }
});

#chartdiv {
  width: 100%;
  height: 700px;
}

g.amcharts-category-axis tspan {
  cursor: pointer;
}

g.amcharts-category-axis text.amcharts-axis-label tspan:hover,
g.amcharts-graph-label-only text tspan {
  text-decoration: underline;
  fill: red;
}

text.amcharts-axis-title {
  font-size: 13px;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/plugins/responsive/responsive.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<button id="resize" data-resized="no">Resize chart</button>
<div id="chartdiv"></div>

关于javascript - Amcharts-尝试在较小的屏幕宽度中创建顶部和底部值轴时出错，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46941987/