Question

以下是多值轴的代码：

因为我们想通过动态使用随机数据来显示图形。当我们运行此代码时，不会发生任何事情。

{{1}}

Answer 1

您似乎希望生成包含随机值的4个图表。

如果这是正确的，您的代码会出现许多问题：

每个图表的值需要合并为每个类别的单个数据点。这样我们每个类别就得到一个对象：

[
  {
    date: '2015-01-01',
    value1: 100,
    value2: 200,
    value3: 300,
    value4, 400
  },
  {
    date: '2015-01-02',
    value1: 101,
    value2: 201,
    value3: 302,
    value4, 404
  },
  // etc.
]

实现这一目标的最佳方法是创建一个带有日期部分的项目，然后为每个图形生成一个值并将它们添加到同一个对象中。然后才将该对象推送到图表数据数组中。

function generateChartData() {
  var firstDate = new Date();
  firstDate.setDate(firstDate.getDate() - 50);
  for (var i = 0; i < 50; i++) {
    var newDate = new Date(firstDate);
    newDate.setDate(newDate.getDate() + i);
    var item = {
      date: newDate
    };
    for (var j = 1; j < 4; j++) {
      item[j.toString()] = Math.round(Math.random() * 40 * j) + 100;;
    }
    chartData.push(item);
  }
}

与添加实际图形对象相同。只需将valueField分配给与数据相同的密钥：

  var v;
  for (var j = 1; j < 4; j++) {
    graph[j] = new AmCharts.AmGraph();
    graph[j].valueAxis = valueAxis1; // we have to indicate which value axis should be used
    graph[j].title = "red line";
    v = j.toString();
    graph[j].valueField = v;
    graph[j].bullet = "round";
    graph[j].hideBulletsCount = 30;
    chart.addGraph(graph[j]);
  }

以下是完整的工作代码：

var chart;
var chartData = [];
// generate some random data, quite different range
function generateChartData() {
  var firstDate = new Date();
  firstDate.setDate(firstDate.getDate() - 50);
  for (var i = 0; i < 50; i++) {
    var newDate = new Date(firstDate);
    newDate.setDate(newDate.getDate() + i);
    var item = {
      date: newDate
    };
    for (var j = 1; j < 4; j++) {
      item[j.toString()] = Math.round(Math.random() * 40 * j) + 100;;
    }
    chartData.push(item);
  }
}

// this method is called when chart is first inited as we listen for "dataUpdated" event
function zoomChart() {
    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
    chart.zoomToIndexes(10, 20);
  }
  // create chart
AmCharts.ready(function() {
  // generate some random data first
  generateChartData();

  // SERIAL CHART    
  chart = new AmCharts.AmSerialChart();
  chart.marginTop = 0;
  chart.autoMarginOffset = 5;
  chart.zoomOutButton = {
    backgroundColor: '#000000',
    backgroundAlpha: 0.15
  };
  chart.dataProvider = chartData;
  chart.categoryField = "date";
  // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
  chart.addListener("dataUpdated", zoomChart);
  // AXES
  // category                
  var categoryAxis = chart.categoryAxis;
  categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
  categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
  categoryAxis.dashLength = 2;
  categoryAxis.gridAlpha = 0.15;
  categoryAxis.axisColor = "#DADADA";
  // first value axis (on the left)
  var valueAxis1 = new AmCharts.ValueAxis();
  valueAxis1.axisColor = "#FF6600";
  valueAxis1.axisThickness = 2;
  valueAxis1.gridAlpha = 0;
  chart.addValueAxis(valueAxis1);
  // second value axis (on the right) 
  var valueAxis2 = new AmCharts.ValueAxis();
  valueAxis2.position = "right"; // this line makes the axis to appear on the right
  valueAxis2.axisColor = "#FCD202";
  valueAxis2.gridAlpha = 0;
  valueAxis2.axisThickness = 2;
  chart.addValueAxis(valueAxis2);
  // third value axis (on the left, detached)
  valueAxis3 = new AmCharts.ValueAxis();
  valueAxis3.offset = 50; // this line makes the axis to appear detached from plot area
  valueAxis3.gridAlpha = 0;
  valueAxis3.axisColor = "#B0DE09";
  valueAxis3.axisThickness = 2;
  chart.addValueAxis(valueAxis3);
  var graph = [];
  var v;
  for (var j = 1; j < 4; j++) {
    graph[j] = new AmCharts.AmGraph();
    graph[j].valueAxis = valueAxis1; // we have to indicate which value axis should be used
    graph[j].title = "red line";
    v = j.toString();
    graph[j].valueField = v;
    graph[j].bullet = "round";
    graph[j].hideBulletsCount = 30;
    chart.addGraph(graph[j]);
  }
  // CURSOR
  var chartCursor = new AmCharts.ChartCursor();
  chartCursor.cursorPosition = "mouse";
  chart.addChartCursor(chartCursor);
  // SCROLLBAR
  var chartScrollbar = new AmCharts.ChartScrollbar();
  chart.addChartScrollbar(chartScrollbar);
  // LEGEND
  var legend = new AmCharts.AmLegend();
  legend.marginLeft = 110;
  chart.addLegend(legend);

  // WRITE
  chart.write("chartdiv");
});

#chartdiv {
  width: 100%;
  height: 500px;
  font-size: 11px;
}

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

如何在运行时在amcharts中生成动态图..？

1 个答案: