切换 amchart 图形类型而不调用函数答案

【问题标题】：Toggle amchart Graph type without recalling function切换 amchart 图形类型而不调用函数
【发布时间】：2019-02-12 09:17:19
【问题描述】：

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

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>

【问题讨论】：

标签： javascript jquery amcharts

【解决方案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>

【讨论】：