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

标签 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>

最佳答案

错误消息提示出了什么问题:“为对象数组属性指定了太多基于索引的覆盖:valueAxes”。基本上，响应式插件在触发规则时无法创建附加值轴(或任何其他属性)，并且只能修改图表中当前存在的属性。这意味着您需要在创建图表时在配置中定义第二个值轴，以便您可以修改宽度规则中的第二个值轴。另外，一个值轴必须至少与一个图相关联才能可见，并且不能通过 valueAxis 将一个图分配给多个值轴。属性(property)。这意味着您还需要另一个隐藏图来表示第二个轴。请注意，您不能使用标签图，因为它不会在可见条的顶部呈现标签。

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

1) 在 makeChart 中添加第二个值轴 includeHidden设置为 false 以便它不会在非旋转 View 中渲染。您还需要设置其 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/

上一篇：javascript - 如何在 ASP.Net Core MVC 中创建级联 SelectList

下一篇：javascript - 四个 $_POST 变量中仅设置了两个

相关文章：

javascript - amcharts svg 条形图上的值之间的动画过渡

angular - amcharts 堆叠条形图 - 响应事件突出显示值(更改 alpha)

javascript - "You may have an infinite update loop in a component render function"当我添加这行代码时 - console.log(perksTree.slots.unshift())

javascript - 按重复模式中的数据属性对元素进行排序

amCharts:尽管之前有图表.homeGeoPoint，但在 JSON 数据源之后 map 重新定位

amcharts - 如何删除 amchart 中条形图(图表)之间的空间

javascript - 当数据 = 0 时，AmCharts 不绘制图表

javascript - 在 lodash 中添加对象的新属性

javascript - AngularJS 之外的端到端测试

javascript - 为什么在 React Native 中 react-native-image-picker 的 showImagePicker 未定义？

©2024 IT工具网  联系我们