Question

我在功能上有多个图形，这些图形取决于上一个图形。那工作正常，但是当我在其中添加切换按钮并尝试切换时会出现问题。功能再次需要数据。因此，在不重新初始化图形的情况下，我想将图形类型从列切换为行。有没有办法做到这一点。帮助将不胜感激

var dataset = [{
    "category": "category 1",
    "column-1": 8,
    "column-2": 5
  },
  {
    "category": "category 2",
    "column-1": 6,
    "column-2": 7
  },
  {
    "category": "category 3",
    "column-1": 2,
    "column-2": 3
  }
]
AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "categoryField": "category",
  "startDuration": 1,
  "categoryAxis": {
    "gridPosition": "start"
  },
  "trendLines": [],
  "graphs": [{
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "fillAlphas": 1,
      "id": "AmGraph-1",
      "title": "graph 1",
      "type": "column",
      "valueField": "column-1"
    },
    {
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "fillAlphas": 1,
      "id": "AmGraph-2",
      "title": "graph 2",
      "type": "column",
      "valueField": "column-2"
    }
  ],
  "guides": [],
  "valueAxes": [{
    "id": "ValueAxis-1",
    "title": "Axis title"
  }],
  "allLabels": [],
  "balloon": {},
  "legend": {
    "enabled": true,
    "useGraphSettings": true
  },
  "titles": [{
    "id": "Title-1",
    "size": 15,
    "text": "Chart Title"
  }],
  "dataProvider": dataset
});

<!DOCTYPE html>
<html>

<head>
  <title>chart created with amCharts | amCharts</title>
  <meta name="description" content="chart created using amCharts live editor" />

  <!-- amCharts javascript sources -->
  <script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
  <script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>


  <!-- amCharts javascript code -->
  <script type="text/javascript">
  </script>
</head>

<body>
  <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>
</body>

</html>

Answer 1

您可以在图表中设置任何公共属性，然后调用validateData()重绘图表，而不必再次提供整个数据集/ makeChart配置。假设您将图表实例存储在变量中：

chart.graphs.forEach(function(graph) {
  graph.type = /* set new type */;
});
chart.validateData();

这是一个演示，可在单击外部按钮时切换图形类型和其他视觉方面：

var dataset = [{
    "category": "category 1",
    "column-1": 8,
    "column-2": 5
  },
  {
    "category": "category 2",
    "column-1": 6,
    "column-2": 7
  },
  {
    "category": "category 3",
    "column-1": 2,
    "column-2": 3
  }
]
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "categoryField": "category",
  "startDuration": 1,
  "categoryAxis": {
    "gridPosition": "start"
  },
  "trendLines": [],
  "graphs": [{
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "fillAlphas": 1,
      "id": "AmGraph-1",
      "title": "graph 1",
      "type": "column",
      "valueField": "column-1"
    },
    {
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "fillAlphas": 1,
      "id": "AmGraph-2",
      "title": "graph 2",
      "type": "column",
      "valueField": "column-2"
    }
  ],
  "guides": [],
  "valueAxes": [{
    "id": "ValueAxis-1",
    "title": "Axis title"
  }],
  "allLabels": [],
  "balloon": {},
  "legend": {
    "enabled": true,
    "useGraphSettings": true
  },
  "titles": [{
    "id": "Title-1",
    "size": 15,
    "text": "Chart Title"
  }],
  "dataProvider": dataset
});

document.getElementById('toggle-type').addEventListener('click', function() {
  chart.graphs.forEach(function(graph) {
    if (graph.type == "column") {
      graph.type = "line";
      graph.fillAlphas = 0;
      graph.bullet = "round";
    }
    else {
      graph.type = "column";
      graph.fillAlphas = 1;
      graph.bullet = undefined;
    }
  });
  chart.validateData();
});

<!DOCTYPE html>
<html>

<head>
  <title>chart created with amCharts | amCharts</title>
  <meta name="description" content="chart created using amCharts live editor" />

  <!-- amCharts javascript sources -->
  <script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
  <script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>


  <!-- amCharts javascript code -->
  <script type="text/javascript">
  </script>
</head>

<body>
  <button id="toggle-type">Toggle line/column</button>
  <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>
</body>

</html>

切换amchart图形类型而不调用功能

1 个答案: