个人中心
gpt4 book ai didi

javascript - AmCharts 使用 validateData() 从 dataProvider 中删除列不起作用

转载 作者：行者123 更新时间：2023-12-03 03:22:08 25 4
gpt4 key购买 nike

我最近询问了一个way to hide columns in AmCharts使用隐藏/显示按钮，效果很好。不过，我现在将函数分离到不同的文件中，以创建更加动态的 Web 应用程序。

页面peptide.html主要包含HTML代码，并引用displayAmCharts.js来显示AmChart和任何文件，在本例中 1A80_HUMAN_R_QDAYDGK_D.js，位于 data/peptide 文件夹中，用于动态加载数据。在 AmChart 中加载和显示数据工作正常，但是当尝试实现隐藏/显示功能时，我遇到了 AmChart 错误。

每次调用函数 hideValue() 时，都会生成一个新的 dataProvider，并替换旧的 dataProvider，AmChart 中的结果只是空白。自己尝试一下这个JS Bin example ，显示一些数据，选择要隐藏的列，单击隐藏，您会看到图表的轮廓几乎保持不变，图例仍然显示相同的选择，但显示了实际数据。

奇怪的是，displayAmCharts() 中的注释代码可以用来替换这些值，但是当这些值没有被硬编码时，替换就不起作用。控制 extraData 所包含内容的一些日志没有显示任何异常，即与默认 dataProvider 中的数据结构相同。

有任何关于数据未正确显示的线索吗？

下面的代码也可以在 JS Bin 上找到:

<html>
  <head>
    <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
    <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
    <script src="https://www.amcharts.com/lib/3/serial.js"></script>
    <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
  </head>   
<script>
  // Source would be C:/Users/Username/Documents/Visualisation Tool/data/peptide/1A80_HUMAN_R_QDAYDGK_D.js
  var graphValues = [{
    "balloonText": "Control: [[value]]",
    "fillAlphas": 1,
    "id": "Control",
    "lineAlpha": 1,
    "lineColor": "#008000",
    "title": "Control",
    "type": "column",
    "newStack": true,
    "valueField": "Control",
    "hidden": true},
{
    "balloonText": "Control SD: [[value]]",
    "fillAlphas": 1,
    "id": "Control SD",
    "lineAlpha": 1,
    "lineColor": "#000000",
    "title": "Control SD",
    "type": "column",
    "valueField": "Control SD",
    "hidden": true},
{
    "balloonText": "Sample A: [[value]]",
    "fillAlphas": 1,
    "id": "Sample A",
    "lineAlpha": 1,
    "lineColor": "#008080",
    "title": "Sample A",
    "type": "column",
    "newStack": true,
    "valueField": "Sample A",
    "hidden": true},
{
    "balloonText": "Sample A SD: [[value]]",
    "fillAlphas": 1,
    "id": "Sample A SD",
    "lineAlpha": 1,
    "lineColor": "#000000",
    "title": "Sample A SD",
    "type": "column",
    "valueField": "Sample A SD",
    "hidden": true},
{
    "title": "All",
    "id": "all",
    "legendValueText": "",
    "legendPeriodValueText": "",
    "hidden": true
}];
var dataValues = [{
    "glycan": "Hex5HexNAc4NeuAc1",
    "Control": 100.0,
    "Control SD": 10.0,
    "Sample A": 80.0,
    "Sample A SD": 8.0},
    {
    "glycan": "Hex5HexNAc4NeuAc2",
    "Control": 50.0,
    "Control SD": 10.0,
    "Sample A": 4.0,
    "Sample A SD": 4.0}
    ];
</script>
  <script>
    // Source would be C:/Users/Username/Documents/Visualisation Tool/scripts/displayAmCharts.js
    var hiddenValues = [];
    var dataProviderVals;

    function displayAmCharts(additionalData){
      var graphsVals = graphValues;
      dataProviderVals = dataValues;
      var chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "dataProvider": dataProviderVals,
        "legend": {
          "useGraphSettings": true,
          "borderAlpha": 1,
          "align": "center",
          "spacing":  125,
          "listeners": [ {
            "event": "hideItem",
            "method": legendHandler
          }, {
            "event": "showItem",
            "method": legendHandler
          }]
        },
        "categoryField": "glycan",
        "categoryAxis": {
          "autoWrap": true
        },
        "rotate": false,
        "graphs": graphsVals,
        "valueAxes": [
          {
            "stackType": "regular",
            "id": "ValueAxis-1",
            "position": "left",
            "axisAlpha": 1
          }
        ],
        "export": {
          "enabled": true
        }
      });   

      /*
      This manual code below works to replace the data.

      var test = [{
        "glycan": "Hex5HexNAc4NeuAc3",
        "Control": 100.0,
        "Control SD": 10.0,
        "Sample A": 80.0,
        "Sample A SD": 8.0},
        {
        "glycan": "Hex5HexNAc4NeuAc4",
        "Control": 50.0,
        "Control SD": 10.0,
        "Sample A": 4.0,
        "Sample A SD": 4.0}
        ];
      chart.dataProvider = test;
      chart.validateData();
      */

      if(additionalData != undefined){
        // Replace the dataProvider with additionalData from hideValue and redraw the chart.
        chart.dataProvider = additionalData;
        chart.validateData();
      }
      function legendHandler(evt) {
        var state = evt.dataItem.hidden;
        if (evt.dataItem.id == "all") {
          for (var i1 in evt.chart.graphs) {
            if (evt.chart.graphs[ i1 ].id != "all") {
              evt.chart[evt.dataItem.hidden ? "hideGraph" : "showGraph" ]( evt.chart.graphs[ i1 ]);
            }
          }
        }
      }
    }
    function hideValue(){
      var selection = document.getElementById("selection");
      var selectedValue = selection.options[selection.selectedIndex].value;
      hiddenValues.push(selectedValue);
      var newDataProvider = [];
      dataValues.forEach(function(item){
        if(hiddenValues.includes(item.glycan) == false){
          newDataProvider.push(item);
        }
      });
      displayAmCharts(newDataProvider);
    }

    function fillSelection(){
      var select = document.getElementById("selection");
      var options = [];
      dataProviderVals.forEach(function(item){
        options.push(item.glycan);
      });
      for(var i = 0; i < options.length; i++) {
        var opt = options[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);
      } 
    }
  </script>

    <body onload="displayAmCharts(); fillSelection()">
        <header>
            <h1><b>Visualisation Tool<b></h1>
        </header>
        <h2></h2>
        <div id="chartdiv"><p>Unfortunately there is no data available.</p></div>

        <div>
            <select class="select" id="selection">
                <option disabled selected>Select an option.</option>
            </select>
            <button class="button" type="button" onclick="hideValue()">Hide</button>
            <button class="button" type="button">Show</button>
        </div>
    </body>
    <script type="text/javascript">
        // Commentary in this version as all JS scripts are included in the same page.
        // Open .JS file that contains data at C > Users > User > Documents > Tool folder > Data > Peptide > peptide based on value stored in localStorage, example would be localStorage.getItem("peptideSelection") = "1A80_HUMAN_R_QDAYDGK_D".
        // var peptide = localStorage.getItem("peptideSelection");
        // var JSLink = "C://Users//Z678187//Documents//StackExample//data//peptide//"+peptide+".js";
        // C://Users/Z678187//Documents/StackExample//data//peptide//1A80_HUMAN_R_QDAYDGK_D.js would be the file location.
        // var JSElement = document.createElement('script');
        // JSElement.src = JSLink;
        // JSElement.onload = OnceLoaded;
        // document.getElementsByTagName('head')[0].appendChild(JSElement);
        // function OnceLoaded() {
        //  displayAmCharts();
        //  fillSelection();
        // }
    </script>
</html>

最佳答案

这可能与每次调用 displayAmCharts 时重新创建图表有关。这是不必要的，并且会让 amCharts 感到困惑。我将 chart 定义为全局变量，并且仅创建图表一次。

您的全局变量

var hiddenValues = [];
var dataProviderVals;
var chart = null; // chart as global variable

displayAmCharts函数

function displayAmCharts(additionalData){

  var graphsVals = graphValues;
  dataProviderVals = dataValues;

  // create chart only once
  if(chart == null){

    chart = AmCharts.makeChart("chartdiv", {
      "type": "serial",
      "dataProvider": dataProviderVals,
      // ...
    });

  }

  if(additionalData != undefined){
    // Replace the dataProvider with additionalData from hideValue and redraw the chart.
    chart.dataProvider = additionalData;
    chart.validateData();
  }

  // ...

}

这应该可以解决问题:-)

关于javascript - AmCharts 使用 validateData() 从 dataProvider 中删除列不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46522892/

25 4 0
文章推荐： javascript - 如何在 Angular4 的组件上显示不同的 JSON 数据？
文章推荐： flutter - 重用输入验证器
文章推荐： android - 为什么我应该将 aar 文件中的依赖项添加到我的项目中？
文章推荐： javascript - ngFor 内的 Angular 2 组件未更新
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com