Question

我是javascript的新手，我正在开发一个应用程序，允许有人使用amCharts查看数据图。我曾经尝试过Dlot by Plotly但不幸的是在共享平台上我无法运行它，因为它消耗的资源比预期的多。我一直面临的挑战是将下拉菜单链接到amCharts。我尝试使用下面的代码将它们链接起来，但返回的错误表示值未知。我有以下代码块可以帮助人们联系它们。

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#dropdown {
  width : 100%;
  height  : auto;
}
#chartdiv {
  width : 100%;
  height  : 500px;
}
</style>
    <meta charset="utf-8"/>
    <script src="amcharts.js" type="text/javascript"></script>
    <script src="serial.js" type="text/javascript"></script>
    <script src="amstock.js" type="text/javascript"></script>
    <script src="plugins/dataloader/dataloader.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="plugins/export/export.css" type="text/css" media="all" />
    <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

</head>

<body>

<script>
        <script src="http://d3js.org/d3.v3.js"></script>
<script>

  d3.csv("data.csv", function(error, data) {
    var select = d3.select("body")
      .append("div")
      .append("select")

    select
      .on("change", function(d) {
        var value = d3.select(this).property("value");
      });

    select.selectAll("option")
      .data(data)
      .enter()
        .append("option")
        .attr("value", function (d) { return d.value; })
        .text(function (d) { return d.label; });

  });
var chart = AmCharts.makeChart( "chartdiv", {
  "path": "/amcharts/",
  "type": "stock",
  "theme": "light",
  "dataSets": [ {
    "title": value,
    "fieldMappings": [ {
      "fromField": "Open",
      "toField": "open"
    }, {
      "fromField": "High",
      "toField": "high"
    }, {
      "fromField": "Low",
      "toField": "low"
    }, {
      "fromField": "Close",
      "toField": "close"
    }, {
      "fromField": "Volume",
      "toField": "volume"
    } ],
    "compared": false,
    "categoryField": "Date",

    /**
     * data loader for data set data
     */
    "dataLoader": {
      "url": "http://www.google.com/finance/historical?q="+value+":ADBE&startdate=Jan+01%2C+2009&enddate=Aug+2%2C+2012&output=csv",
      "format": "csv",
      "showCurtain": true,
      "showErrors": true,
      "async": true,
      "reverse": false,
      "delimiter": ",",
      "useColumnNames": true
    },

  }],

  "panels": [ {
    "showCategoryAxis": false,
    "title": "Value",
    "percentHeight": 70,
    "stockGraphs": [ {
        "type": "line",
        "id": "g1",
        /*"openField": "open",
        "closeField": "close",
        "highField": "high",
        "lowField": "low",*/
        "valueField": "close",
        "lineColor": "#db4c3c",
        "fillColors": "#fff",
        "negativeLineColor": "#db4c3c",
        "negativeFillColors": "#db4c3c",
        "fillAlphas": 0,
        "comparedGraphLineThickness": 2,
        "columnWidth": 0.7,
        "useDataSetColors": false,
        "comparable": true,
        "compareField": "close",
        "showBalloon": false,
        "proCandlesticks": true
      } ],
    "stockLegend": {
      "periodValueTextComparing": "[[percents.value.close]]%",
      "periodValueTextRegular": "[[value.close]]"
    }
  }, {
    "title": "Volume",
    "percentHeight": 30,
    "stockGraphs": [ {
      "valueField": "volume",
      "type": "column",
      "showBalloon": false,
      "fillAlphas": 1,
       "lineColor": "#db4c3c",
       "fillColors": "#db4c3c",
       "negativeLineColor": "#db4c3c",
       "negativeFillColors": "#db4c3c"
    } ],
    "stockLegend": {
      "periodValueTextRegular": "[[value.close]]"
    }
  } ],

  "chartScrollbarSettings": {
    "graph": "g1"
  },

  "chartCursorSettings": {
    "valueBalloonsEnabled": true,
    "fullWidth": true,
    "cursorAlpha": 0.1,
    "valueLineBalloonEnabled": true,
    "valueLineEnabled": true,
    "valueLineAlpha": 0.5
  },

  "periodSelector": {
    "position": "left",
    "periods": [ {
      "period": "MM",
      "selected": true,
      "count": 1,
      "label": "1 month"
    }, {
      "period": "YYYY",
      "count": 1,
      "label": "1 year"
    },{
      "period": "YYYY",
      "count": 2,
      "label": "2 year"
    },{
      "period": "YTD",
      "label": "YTD"
    }, {
      "period": "MAX",
      "label": "MAX"
    } ]
  },

  "dataSetSelector": {
    "position": "left"
  },

  "export": {
    "enabled": true
  }
} );
</script>
<div id="chartdiv"></div>

</body>
</html>

诀窍是保留下拉列表的值并将其附加到网址。另一件事是可以创建一个回调函数，以便在下拉列表更改时更新绘图。下拉列表的内容为

name,ticker
apple, AAPL
google,googl
microsoft,msft

第一行是带有列名的标题行。目的不是硬编码数据集和下拉列表，以允许没有任何知识的人更改添加数据集到列表。它不一定是财务数据，也包括医疗保健和其他形式。选择这个作为一个工作的例子，因为它是最近的。

Answer 1

由于csv方法是异步的，因此调用时间line未定义

str。您需要调整设置，以便csv回调创建具有默认值的初始图表，例如

value

要使下拉列表更新图表，您需要修改图表实例的dataLoader网址，然后在更改回调期间调用loadData方法：

AmCharts.makeChart

将csv生成的下拉菜单添加到amcharts

1 个答案: