Fatal编程技术网
  • javascript/
  • Javascript 如何在运行时在amcharts中生成动态图。。？

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

javascript arrays

Javascript 如何在运行时在amcharts中生成动态图。。？,javascript,arrays,ubuntu-14.04,amcharts,Javascript,Arrays,Ubuntu 14.04,Amcharts,以下是多个值轴的代码： 在这种情况下，我们希望通过使用随机数据动态显示图形。 当我们运行此代码时，不会发生任何事情 <script> var chart; var chartData = []; // generate some random data, quite different range function generateChartData() { var firstDate = new Date(); firstDate.setDate(firstDate

以下是多个值轴的代码：

在这种情况下，我们希望通过使用随机数据动态显示图形。 当我们运行此代码时，不会发生任何事情

<script>
var chart;
var chartData = [];
// generate some random data, quite different range
function generateChartData() {
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 50);
    var v = [];
    var a = [];
    for (var i = 0; i < 50; i++) {
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);}
     for (var j = 1; j < 4; j++) {   
        v[j] = Math.round(Math.random() * 40 *j) + 100;
         chartData.push({
            date: newDate,
            a + j.toString():v[j]
          // a + j = stringValue - 0;
          //var a[j]:v[j],       
        });   
     }   
    }
}
// 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.pathToImages = "http://www.amcharts.com/lib/images/";
    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 = a + 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");
});
</script>
<body>
  <div id="chartdiv" style="width: 640px: hieght: 400px: overflow: hidden: text-align: left;">
  </div>
</body>


var图；
var chartData=[]；
//生成一些随机数据，范围大不相同
函数generateChartData（）{
var firstDate=新日期（）；
firstDate.setDate（firstDate.getDate（）-50）；
var v=[]；
var a=[]；
对于（变量i=0；i<50；i++）{
var newDate=新日期（firstDate）；
newDate.setDate（newDate.getDate（）+i）；}
对于（var j=1；j<4；j++）{
v[j]=Math.round（Math.random（）*40*j）+100；
chartData.push({
日期：newDate，
a+j.toString（）：v[j]
//a+j=stringValue-0；
//变量a[j]：v[j]，
});   
}   
}
}
//当我们侦听“DataUpdate”事件时，第一次初始化图表时，调用此方法
函数zoomChart（）{
//可以使用不同的缩放方法-ZoomToIndex、zoomToDates、zoomToCategoryValues
图.动物指数（10,20）；
}
//创建图表
AmCharts.ready（函数（）{
//首先生成一些随机数据
generateChartData（）；
//序列图
chart=新的AmCharts.AmSerialChart（）；
chart.marginTop=0；
chart.autoMarginOffset=5；
chart.pathToImages=”http://www.amcharts.com/lib/images/";
chart.zoomOutButton={
背景颜色：'#000000'，
背景α：0.15
};
chart.dataProvider=chartData；
chart.categoryField=“日期”；
//侦听“dataUpdated”事件（在图表初始化时激发），并在事件发生时调用zoomChart方法
chart.addListener（“数据更新”，zoomChart）；
//斧头
//类别
var categoryAxis=chart.categoryAxis；
categoryAxis.parseDates=true；//由于我们的数据是基于日期的，所以我们将parseDates设置为true
categoryAxis.minPeriod=“DD”//我们的数据是每日的，所以我们将minPeriod设置为DD
categoryAxis.dashLength=2；
categoryAxis.gridAlpha=0.15；
categoryAxis.axisColor=“#DADADA”；
//第一个值轴（在左侧）
var valueAxis1=新的AmCharts.ValueAxis（）；
valueAxis1.axisColor=“#FF6600”；
值Axis1.axisThickness=2；
valueAxis1.gridAlpha=0；
图表.addValueAxis（valueAxis1）；
//第二个值轴（右侧）
var valueAxis2=新的AmCharts.ValueAxis（）；
valueAxis2.position=“right”；//此行使轴显示在右侧
valueAxis2.axisColor=“#FCD202”；
valueAxis2.gridAlpha=0；
值Axis2.axisThickness=2；
图表.addValueAxis（valueAxis2）；
//第三个值轴（位于左侧，已分离）
valueAxis3=新的AmCharts.ValueAxis（）；
valueAxis3.offset=50；//此行使轴看起来与打印区域分离
valueAxis3.gridAlpha=0；
valueAxis3.axisColor=“#B0DE09”；
值Axis3.axisThickness=2；
图表.addValueAxis（valueAxis3）；
var图=[]；
var v；
对于（var j=1；j<4；j++）
{   
graph[j]=新的AmCharts.AmGraph（）；
图形[j].valueAxis=valueAxis1；//我们必须指出应该使用哪个值轴
图[j].title=“红线”；
v=a+j.toString（）；
图[j]。valueField=v；
图[j].bullet=“round”；
图[j].HidebulletScont=30；
图.addGraph（图[j]）；
}
//光标
var chartCursor=new AmCharts.chartCursor（）；
chartCursor.cursorPosition=“鼠标”；
chart.addChartCursor（chartCursor）；
//滚动条
var chartScrollbar=新的AmCharts.chartScrollbar（）；
chart.addChartScrollbar（chartScrollbar）；
//传奇
var legend=new AmCharts.AmLegend（）；
legend.marginLeft=110；
图表。添加图例（图例）；
//写
chart.write（“chartdiv”）；
});
您似乎希望生成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);
  }
}
以下是完整的工作代码：

var图；
var chartData=[]；
//生成一些随机数据，范围大不相同
函数generateChartData（）{
var firstDate=新日期（）；
firstDate.setDate（firstDate.getDate（）-50）；
对于（变量i=0；i<50；i++）{
var newDate=新日期（firstDate）；
newDate.setDate（newDate.getDate（）+i）；
变量项={
日期：newDate
};
对于（var j=1；j<4；j++）{
item[j.toString（）]=Math.round（Math.random（）*40*j）+100；；
}
chartData.push（项目）；
}
}
//当我们侦听“DataUpdate”事件时，第一次初始化图表时，调用此方法
函数zoomChart（）{
//可以使用不同的缩放方法-ZoomToIndex、zoomToDates、zoomToCategoryValues
图.动物指数（10,20）；
}
//创建图表
AmCharts.ready（函数（）{
//首先生成一些随机数据
generateChartData（）；
//序列图
chart=新的AmCharts.AmSerialChart（）；
chart.marginTop=0；
chart.autoMarginOffset=5；
chart.zoomOutButton={
背景颜色：'#000000'，
背景α：0.15
};
chart.dataProvider=chartData；
chart.categoryField=“日期”；
//侦听“dataUpdated”事件（在图表初始化时激发），并在事件发生时调用zoomChart方法
chart.addListener（“数据更新”，zoomChart）；
//斧头
//类别
var categoryAxis=chart.categoryAxis；
categoryAxis.parseDates=true；//由于我们的数据是基于日期的，所以我们将parseDates设置为true
categoryAxis.minPeriod=“DD”//我们的数据是每日的，所以我们将minPeriod设置为DD
categoryAxis.dashLength=2；
categoryAxis.gridAlpha=0.15；
categoryAxis.axisColor=“#DADADA”；
//第一个值轴（在左侧）
var valueAxis

  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]);
  }