2016-02-26 65 views
0

我想在AmChart股票图表中显示两个图表,但它在两个图表中显示相同的数据。我的JavaScript代码如下所示:AmChart股票图表没有显示不同的图形

var chart = AmCharts.makeChart("chartdiv", { 
 
    type: "stock", // Possible types are: serial, pie, xy, radar, funnel, gauge, map, stock 
 
    pathToImages: "http://www.amcharts.com/images/", 
 
    dataDateFormat: "YYYY-MM-DD", 
 
    dataSets: [{ 
 
     color: "#b0de09", // bar chart color 
 

 
     // userRegistrations variable is source of user data 
 
     dataProvider: userRegistrations, 
 

 
     fieldMappings: [{ 
 
      fromField: "val", 
 
      toField: "value" 
 
     }], 
 
     categoryField: "date" 
 
    }, 
 
    { 
 
     color: "#efefef", // bar chart color 
 

 
     // likes variable is source of data for likes 
 
     dataProvider: likes, 
 

 
     fieldMappings: [{ 
 
      fromField: "val", 
 
      toField: "value" 
 
     }], 
 
     categoryField: "date", 
 
    }], 
 

 
    panels: [{ 
 

 
     legend: {}, 
 

 
     stockGraphs: [{ 
 
      id: "graph1", 
 
      valueField: "value", 
 
      type: "column", 
 
      title: "User Graph", 
 
      fillAlphas: 1, 
 
      comparable: true, 
 
      compareField: "value", 
 
      balloonText: "Users registered: <b>[[val]]</b>", 
 

 
     }] 
 
    }, 
 
    { 
 

 
     legend: {}, 
 

 
     stockGraphs: [{ 
 
      id: "graph2", 
 
      valueField: "value", 
 
      type: "column", 
 
      title: "Watch List Graph", 
 
      fillAlphas: 1, 
 
      comparable: true, 
 
      compareField: "value", 
 
      balloonText: "Added to Watch List: <b>[[val]]</b>", 
 

 
     }] 
 
    }], 
 

 
    panelsSettings: { 
 
     startDuration: 1 
 
    }, 
 

 
    categoryAxesSettings: { 
 
     dashLength: 5 
 
    }, 
 

 
    valueAxesSettings: { 
 
     dashLength: 5 
 
    }, 
 

 
    chartScrollbarSettings: { 
 
     graph: "graph1", 
 
     graphType: "line", 
 
     position: "top" 
 
    }, 
 

 
    chartCursorSettings: { 
 
     valueBalloonsEnabled: true, 
 
     fullWidth:true, 
 
     cursorAlpha:0.1 
 

 
    }, 
 

 
    // range selector 
 
    periodSelector: { 
 
     position: "top", 
 
     periods: [{ 
 
      period: "DD", 
 
      count: 1, 
 
      label: "1 day" 
 
     }, { 
 
      period: "DD", 
 
      selected: true, 
 
      count: 7, 
 
      label: "7 days" 
 
     }, { 
 
      period: "MM", 
 
      count: 1, 
 
      label: "1 month" 
 
     }, { 
 
      period: "YYYY", 
 
      count: 1, 
 
      label: "1 year" 
 
     }, { 
 
      period: "YTD", 
 
      label: "YTD" 
 
     }, { 
 
      period: "MAX", 
 
      label: "MAX" 
 
     }] 
 
    }, 
 

 
    // ballon on mouse hover 
 
    "balloon": { 
 
    "adjustBorderColor": true, 
 
    "color": "#000000", 
 
    // "cornerRadius": 5, 
 
    "fillColor": "#FFFFFF" 
 
    } 
 
}); 
 

 
// date picker 
 
chart.addListener('rendered', function (event) { 
 
    var dataProvider = chart.dataSets[0].dataProvider; 
 
     $(".amChartsPeriodSelector .amChartsInputField").datepicker({ 
 
     dateFormat: "dd-mm-yy", 
 
     minDate: dataProvider[0].date, 
 
     maxDate: dataProvider[dataProvider.length-1].date, 
 
     onClose: function() { 
 
      $(".amChartsPeriodSelector .amChartsInputField").trigger('blur'); 
 
     } 
 
    }); 
 
});

我有两个数据集和两个面板。两个面板都显示相同的数据集(具有userRegistrations dataProvider的数据集)。我想展示分开的数据集。

我已经浏览了AmCharts文档,但无法解决如何执行此操作。

回答

3

如果我理解正确,您希望第一个面板显示从第一个数据集生成的图形,第二个面板显示第二个数据集的图形。

为了实现这一目标,你需要做两件事情:

1)请通过设置它比第二组数据是compared参数true以及值字段映射到一个不同的名字比第一数据集:

{ 
    color: "#efefef", // bar chart color 

    // likes variable is source of data for likes 
    dataProvider: likes, 

    fieldMappings: [{ 
     fromField: "val", 
     toField: "value2" 
    }], 
    categoryField: "date", 
    compared: true 
} 

2)使第二个面板上的图形使用“value2”字段而不是“value”。

这里是全码:

var chart = AmCharts.makeChart("chartdiv", { 
    type: "stock", // Possible types are: serial, pie, xy, radar, funnel, gauge, map, stock 
    pathToImages: "http://www.amcharts.com/images/", 
    dataDateFormat: "YYYY-MM-DD", 
    dataSets: [{ 
     color: "#b0de09", // bar chart color 

     // userRegistrations variable is source of user data 
     dataProvider: userRegistrations, 

     fieldMappings: [{ 
      fromField: "val", 
      toField: "value" 
     }], 
     categoryField: "date" 
    }, 
    { 
     color: "#efefef", // bar chart color 

     // likes variable is source of data for likes 
     dataProvider: likes, 

     fieldMappings: [{ 
      fromField: "val", 
      toField: "value2" 
     }], 
     categoryField: "date", 
     compared: true 
    }], 

    panels: [{ 

     legend: {}, 

     stockGraphs: [{ 
      id: "graph1", 
      valueField: "value", 
      type: "column", 
      title: "User Graph", 
      fillAlphas: 1, 
      comparable: true, 
      compareField: "value", 
      balloonText: "Users registered: <b>[[val]]</b>", 

     }] 
    }, 
    { 

     legend: {}, 

     stockGraphs: [{ 
      id: "graph2", 
      valueField: "value2", 
      type: "column", 
      title: "Watch List Graph", 
      fillAlphas: 1, 
      comparable: true, 
      compareField: "value2", 
      balloonText: "Added to Watch List: <b>[[val]]</b>", 

     }] 
    }], 

    panelsSettings: { 
     startDuration: 1 
    }, 

    categoryAxesSettings: { 
     dashLength: 5 
    }, 

    valueAxesSettings: { 
     dashLength: 5 
    }, 

    chartScrollbarSettings: { 
     graph: "graph1", 
     graphType: "line", 
     position: "top" 
    }, 

    chartCursorSettings: { 
     valueBalloonsEnabled: true, 
     fullWidth:true, 
     cursorAlpha:0.1 

    }, 

    // range selector 
    periodSelector: { 
     position: "top", 
     periods: [{ 
      period: "DD", 
      count: 1, 
      label: "1 day" 
     }, { 
      period: "DD", 
      selected: true, 
      count: 7, 
      label: "7 days" 
     }, { 
      period: "MM", 
      count: 1, 
      label: "1 month" 
     }, { 
      period: "YYYY", 
      count: 1, 
      label: "1 year" 
     }, { 
      period: "YTD", 
      label: "YTD" 
     }, { 
      period: "MAX", 
      label: "MAX" 
     }] 
    }, 

    // ballon on mouse hover 
    "balloon": { 
    "adjustBorderColor": true, 
    "color": "#000000", 
    // "cornerRadius": 5, 
    "fillColor": "#FFFFFF" 
    } 
});