更改AmChart

Question

我正在使用amchart制作图表。它从csv文件中获取数据并将其放在折线图中。我想要做的是改变图表中显示的值的数量。例如，我想只显示csv文件的最后30个值。这些是我的Amchart设置：

var chart = AmCharts.makeChart(htmlID, {
            "type": "serial",
            "color": "#FFFFFF",
            "theme": "light",
            "titles": [{
                "text": graphTitle,
                "alpha": 1,
                "color": "#FFFFFF"
            }],
            "dataProvider": data,
            "valueAxes": [{
                "title": xTitle,
                "gridColor": "#FFFFFF",
                "gridAlpha": 0.3,
                "dashLength": 0
            }],
            "gridAboveGraphs": true,
            "startDuration": 1,
            "graphs": [{
                "balloonText": "[[category]]: <b>[[value]]</b>",
                "fillAlphas": 0,
                "lineAlpha": 1,
                "type": graphType,
                "bullet": "round",
                "valueField": xField
            }],
            "chartCursor": {
                "categoryBalloonEnabled": false,
                "cursorAlpha": 0,
                "zoomable": true
            },
            "categoryField": yField,
            "categoryAxis": {
                "title": yTitle,
                "autoGridCount": false,
                "gridCount": 20,
                "gridPosition": "start",
                "gridAlpha": 0,
                "tickPosition": "start",
                "tickLength": 20,
                "labelRotation": 290
            }
        });

    });

这是de parseCSV函数：

        function parseCSV(data) {
        //replace UNIX new lines
        data = data.replace(/rn/g, "n");
        //replace MAC new lines
        data = data.replace(/r/g, "n");
        //split into rows
        var rows = data.split("n");

        // loop through all rows
        for (var i = 0; i < rows.length; i++) {
            // this line helps to skip empty rows
            if (rows[i]) {
                // our columns are separated by comma
                var column = rows[i].split(",");

                var category = column[yLocation];
                // second item is value of the second column
                var value = column[xLocation];

                // create object which contains all these items:
                var dataObject = {
                    //Or change this to field names! Like STN and TEMP
                    ID: category,
                    TEMP: value
                };
                // add object to chartData array
                chartData.push(dataObject);
            }
        }
        chart.validateData();
    }

我尝试更改for循环，因此它只读取最后30行。我不知道为什么，但不知怎的，这不起作用。 问题是我如何更改图表的值数量。

Answer 1

您可以使用数组slice方法将CSV数组切割为最后30个值，然后再将它们分配给图表：

function parseCSV(data) {
  //replace UNIX new lines
  data = data.replace(/\r\n/g, "\n");
  //replace MAC new lines
  data = data.replace(/\r/g, "\n");
  //split into rows
  var rows = data.split("\n");

  //get the last 30
  if (rows.length > 30) {
    rows = rows.slice(rows.length - 31);
  }

  // loop through all rows
  for (var i = 0; i < rows.length; i++) {
    // this line helps to skip empty rows
    if (rows[i]) {
      // our columns are separated by comma
      var column = rows[i].split(",");

      var category = column[yLocation];
      // second item is value of the second column
      var value = column[xLocation];

      // create object which contains all these items:
      var dataObject = {
        //Or change this to field names! Like STN and TEMP
        ID: category,
        TEMP: value
      };
      // add object to chartData array
      chartData.push(dataObject);
    }
  }
  chart.validateData();
}

此处使用您的代码demo。