Amcharts中的两个图表

时间：2016-10-17 08:41:22

标签： amcharts

我想在Amcharts中删除两个图表，但第二个图表从不显示图表，似乎只有chart.dataSets = [dataSet1, dataSet2]中的第一部分始终显示图表。那怎么解决呢？

function createStockChart(data) {
        var chart = new AmCharts.AmStockChart();

        // DATASETS
        var dataSet1 = new AmCharts.DataSet();
        dataSet1.color = "#b0de09";
        dataSet1.fieldMappings = [{
            fromField: "NAV",
            toField: "NAV"
        }];
        dataSet1.dataProvider = data;
        dataSet1.categoryField = "Date";

        var dataSet2 = new AmCharts.DataSet();
        dataSet2.color = "#b0de09";
        dataSet2.fieldMappings = [{
            fromField: "PNL",
            toField: "PNL"
        }];
        dataSet2.dataProvider = data;
        dataSet2.categoryField = "Date";

        chart.dataSets = [dataSet1, dataSet2];

        // PANELS
        var stockPanel1 = new AmCharts.StockPanel();
        stockPanel1.showCategoryAxis = true;
        stockPanel1.title = "NAV";
        stockPanel1.eraseAll = false;
        //stockPanel.addLabel(0, 100, "Click on the pencil icon on top-right to start drawing", "center", 16);

        var graph1 = new AmCharts.StockGraph();
        graph1.title = "NAV";
        graph1.valueField = "NAV";
        graph1.bullet = "round";
        graph1.bulletColor = "#FFFFFF";
        graph1.bulletBorderColor = "#00BBCC";
        graph1.bulletBorderAlpha = 1;
        graph1.bulletBorderThickness = 2;
        graph1.bulletSize = 7;
        graph1.lineThickness = 2;
        graph1.lineColor = "#00BBCC";
        graph1.useDataSetColors = false;
        graph1.comparable = true;
        graph1.compareField = "HSI";
        stockPanel1.addStockGraph(graph1);

        var stockPanel2 = new AmCharts.StockPanel();
        stockPanel2.showCategoryAxis = true;
        stockPanel2.title = "PNL";
        stockPanel2.eraseAll = false;
        //stockPanel.addLabel(0, 100, "Click on the pencil icon on top-right to start drawing", "center", 16);

        var graph2 = new AmCharts.StockGraph();
        graph2.title = "PNL";
        graph2.valueField = "PNL";
        graph2.bullet = "round";
        graph2.bulletColor = "#FFFFFF";
        graph2.bulletBorderColor = "#00BBCC";
        graph2.bulletBorderAlpha = 1;
        graph2.bulletBorderThickness = 2;
        graph2.bulletSize = 7;
        graph2.lineThickness = 2;
        graph2.lineColor = "#00BBCC";
        graph2.useDataSetColors = false;
        graph2.comparable = true;
        graph2.compareField = "HSI";
        stockPanel2.addStockGraph(graph2);



        chart.panels = [stockPanel1, stockPanel2];



        chart.write('divPnlAmChart');
    };

1 个答案:

答案 0 :(得分：0)

默认情况下，股票图表仅显示主数据集（第一个）中的数据。如果要显示第二个图形，则有两个选项：

1）将所有内容组合到一个dataSet中（fieldMappings可以有多个映射）：

  var dataSet1 = new AmCharts.DataSet();
  dataSet1.color = "#b0de09";
  dataSet1.fieldMappings = [{
    fromField: "NAV",
    toField: "NAV"
  },{
    fromField: "PNL",
    toField: "PNL"
  }];
  dataSet1.dataProvider = data;
  dataSet1.categoryField = "Date";

＆＃13;
＆＃13; 
var data1 = [{
  "Date": "2016-07-09",
  "NAV": 23.11,
  "PNL": 14.89
}, {
  "Date": "2016-07-10",
  "NAV": 25.01,
  "PNL": 12.72
}, {
  "Date": "2016-07-11",
  "NAV": 25.7,
  "PNL": 9.62
}, {
  "Date": "2016-07-12",
  "NAV": 21.51,
  "PNL": 11.86
}, {
  "Date": "2016-07-13",
  "NAV": 28.49,
  "PNL": 6.87
}, {
  "Date": "2016-07-14",
  "NAV": 31.96,
  "PNL": 8.47
}, {
  "Date": "2016-07-15",
  "NAV": 23.01,
  "PNL": 8.18
}, {
  "Date": "2016-07-16",
  "NAV": 31.0,
  "PNL": 6.14
}, {
  "Date": "2016-07-17",
  "NAV": 29.66,
  "PNL": 13.08
}, {
  "Date": "2016-07-18",
  "NAV": 25.97,
  "PNL": 13.79
}, {
  "Date": "2016-07-19",
  "NAV": 33.57,
  "PNL": 13.43
}, {
  "Date": "2016-07-20",
  "NAV": 27.12,
  "PNL": 11.42
}, {
  "Date": "2016-07-21",
  "NAV": 27.45,
  "PNL": 7.92
}, {
  "Date": "2016-07-22",
  "NAV": 31.41,
  "PNL": 8.6
}, {
  "Date": "2016-07-23",
  "NAV": 27.08,
  "PNL": 13.28
}];



function createStockChart(data) {
  var chart = new AmCharts.AmStockChart();

  var dataSet1 = new AmCharts.DataSet();
  dataSet1.color = "#b0de09";
  dataSet1.fieldMappings = [{
    fromField: "NAV",
    toField: "NAV"
  }, {
    fromField: "PNL",
    toField: "PNL"
  }];
  dataSet1.dataProvider = data;
  dataSet1.categoryField = "Date";

  chart.dataSets = [dataSet1];

  // PANELS
  var stockPanel1 = new AmCharts.StockPanel();
  stockPanel1.showCategoryAxis = true;
  stockPanel1.title = "NAV";
  stockPanel1.eraseAll = false;
  //stockPanel.addLabel(0, 100, "Click on the pencil icon on top-right to start drawing", "center", 16);

  var graph1 = new AmCharts.StockGraph();
  graph1.title = "NAV";
  graph1.valueField = "NAV";
  graph1.bullet = "round";
  graph1.bulletColor = "#FFFFFF";
  graph1.bulletBorderColor = "#00BBCC";
  graph1.bulletBorderAlpha = 1;
  graph1.bulletBorderThickness = 2;
  graph1.bulletSize = 7;
  graph1.lineThickness = 2;
  graph1.lineColor = "#00BBCC";
  graph1.useDataSetColors = false;
  stockPanel1.addStockGraph(graph1);

  var stockPanel2 = new AmCharts.StockPanel();
  stockPanel2.showCategoryAxis = true;
  stockPanel2.title = "PNL";
  stockPanel2.eraseAll = false;
  //stockPanel.addLabel(0, 100, "Click on the pencil icon on top-right to start drawing", "center", 16);

  var graph2 = new AmCharts.StockGraph();
  graph2.title = "PNL";
  graph2.valueField = "PNL";
  graph2.bullet = "round";
  graph2.bulletColor = "#FFFFFF";
  graph2.bulletBorderColor = "#00BBCC";
  graph2.bulletBorderAlpha = 1;
  graph2.bulletBorderThickness = 2;
  graph2.bulletSize = 7;
  graph2.lineThickness = 2;
  graph2.lineColor = "#00BBCC";
  graph2.useDataSetColors = false;
  stockPanel2.addStockGraph(graph2);

  chart.panels = [stockPanel1, stockPanel2];



  chart.write('divPnlAmChart');
};

createStockChart(data1);
＆＃13; 
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="divPnlAmChart" style="width: 100%; height: 400px;"></div>
＆＃13;
＆＃13;
＆＃13;

或者

2）将第二个dataSet的compared属性设置为true。您还需要将compareField设置为与valueField：

相同

＆＃13;
＆＃13; 
var data = [{
  "Date": "2016-07-09",
  "NAV": 28.74
}, {
  "Date": "2016-07-10",
  "NAV": 31.71
}, {
  "Date": "2016-07-11",
  "NAV": 31.75
}, {
  "Date": "2016-07-12",
  "NAV": 29.14
}, {
  "Date": "2016-07-13",
  "NAV": 22.26
}, {
  "Date": "2016-07-14",
  "NAV": 24.26
}, {
  "Date": "2016-07-15",
  "NAV": 27.32
}, {
  "Date": "2016-07-16",
  "NAV": 34.18
}, {
  "Date": "2016-07-17",
  "NAV": 27.19
}, {
  "Date": "2016-07-18",
  "NAV": 29.51
}, {
  "Date": "2016-07-19",
  "NAV": 22.86
}, {
  "Date": "2016-07-20",
  "NAV": 28.87
}, {
  "Date": "2016-07-21",
  "NAV": 24.82
}, {
  "Date": "2016-07-22",
  "NAV": 23.92
}, {
  "Date": "2016-07-23",
  "NAV": 29.45
}];

var data2 = [{
  "Date": "2016-07-09",
  "PNL": 6.29
}, {
  "Date": "2016-07-10",
  "PNL": 9.51
}, {
  "Date": "2016-07-11",
  "PNL": 8.33
}, {
  "Date": "2016-07-12",
  "PNL": 7.02
}, {
  "Date": "2016-07-13",
  "PNL": 8.87
}, {
  "Date": "2016-07-14",
  "PNL": 5.56
}, {
  "Date": "2016-07-15",
  "PNL": 8.29
}, {
  "Date": "2016-07-16",
  "PNL": 13.93
}, {
  "Date": "2016-07-17",
  "PNL": 13.04
}, {
  "Date": "2016-07-18",
  "PNL": 12.47
}, {
  "Date": "2016-07-19",
  "PNL": 11.8
}, {
  "Date": "2016-07-20",
  "PNL": 10.63
}, {
  "Date": "2016-07-21",
  "PNL": 15.14
}, {
  "Date": "2016-07-22",
  "PNL": 7.16
}, {
  "Date": "2016-07-23",
  "PNL": 10.58
}];



function createStockChart(data, data2) {
  var chart = new AmCharts.AmStockChart();

  // DATASETS
  var dataSet1 = new AmCharts.DataSet();
  dataSet1.color = "#b0de09";
  dataSet1.fieldMappings = [{
    fromField: "NAV",
    toField: "NAV"
  }];
  dataSet1.dataProvider = data;
  dataSet1.categoryField = "Date";

  var dataSet2 = new AmCharts.DataSet();
  dataSet2.color = "#b0de09";
  dataSet2.fieldMappings = [{
    fromField: "PNL",
    toField: "PNL"
  }];
  dataSet2.dataProvider = data2;
  dataSet2.compared = true;
  dataSet2.categoryField = "Date";

  chart.dataSets = [dataSet1, dataSet2];

  // PANELS
  var stockPanel1 = new AmCharts.StockPanel();
  stockPanel1.showCategoryAxis = true;
  stockPanel1.title = "NAV";
  stockPanel1.eraseAll = false;
  //stockPanel.addLabel(0, 100, "Click on the pencil icon on top-right to start drawing", "center", 16);

  var graph1 = new AmCharts.StockGraph();
  graph1.title = "NAV";
  graph1.valueField = "NAV";
  graph1.bullet = "round";
  graph1.bulletColor = "#FFFFFF";
  graph1.bulletBorderColor = "#00BBCC";
  graph1.bulletBorderAlpha = 1;
  graph1.bulletBorderThickness = 2;
  graph1.bulletSize = 7;
  graph1.lineThickness = 2;
  graph1.lineColor = "#00BBCC";
  graph1.useDataSetColors = false;
  graph1.comparable = true;
  graph1.compareField = "NAV";
  stockPanel1.addStockGraph(graph1);

  var stockPanel2 = new AmCharts.StockPanel();
  stockPanel2.showCategoryAxis = true;
  stockPanel2.title = "PNL";
  stockPanel2.eraseAll = false;
  //stockPanel.addLabel(0, 100, "Click on the pencil icon on top-right to start drawing", "center", 16);

  var graph2 = new AmCharts.StockGraph();
  graph2.title = "PNL";
  graph2.valueField = "PNL";
  graph2.bullet = "round";
  graph2.bulletColor = "#FFFFFF";
  graph2.bulletBorderColor = "#00BBCC";
  graph2.bulletBorderAlpha = 1;
  graph2.bulletBorderThickness = 2;
  graph2.bulletSize = 7;
  graph2.lineThickness = 2;
  graph2.lineColor = "#00BBCC";
  graph2.useDataSetColors = false;
  graph2.comparable = true;
  graph2.compareField = "PNL";
  stockPanel2.addStockGraph(graph2);



  chart.panels = [stockPanel1, stockPanel2];



  chart.write('divPnlAmChart');
};

createStockChart(data, data2);
＆＃13; 
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="divPnlAmChart" style="width: 100%; height: 400px;"></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题