1

创建图表后，我需要在同一面板中再添加一张makeChart()图表。如果我可以再创建一个函数来添加这个额外的图表，它将解决问题，但无法找到解决方案。我写了一个函数来添加这个图，但不确定这是否是正确的方法。它不工作。

var chart = AmCharts.makeChart("chartdiv", {
  "type": "stock",
  "color": "#fff",
  "dataDateFormat": "YYYY-MM-DD",
  "dataSets": [{
  "title": "MSFT",
    "fieldMappings": [{
      "fromField": "Open",
      "toField": "open"
    }, {
      "fromField": "High",
      "toField": "high"
    }, {
      "fromField": "Low",
      "toField": "low"
    }, {
      "fromField": "Close",
      "toField": "close"
    }, {
      "fromField": "Volume",
      "toField": "volume"
    }],
    "compared": false,
    "categoryField": "Date",

    /**
     * data loader for data set data
     */
    "dataLoader": {
      "url": "data/MSFT.csv",
      "format": "csv",
      "showCurtain": true,
      "showErrors": true,
      "async": true,
      "reverse": true,
      "delimiter": ",",
      "useColumnNames": true
   },

   /**
    * data loader for events data
    */
    "eventDataLoader": {
      "url": "data/MSFT_events.csv",
      "format": "csv",
      "showCurtain": true,
      "showErrors": true,
      "async": true,
      "reverse": true,
      "delimiter": ",",
      "useColumnNames": true,
      "postProcess": function ( data ) {
        for ( var x in data ) {
          switch( data[x].Type ) {
            case 'A':
              var color = "#85CDE6";
              break;
            default:
              var color = "#cccccc";
              break;
          }
          data[x].Description = data[x].Description.replace( "Upgrade", "<strong style=\"color: #0c0\">Upgrade</strong>" ).replace( "Downgrade", "<strong style=\"color: #c00\">Downgrade</strong>" );
          data[x] = {
            type: "pin",
            graph: "g1",
            backgroundColor: color,
            date: data[x].Date,
            text: data[x].Type,
            description: "<strong>" + data[x].Title + "</strong><br />" + data[x].Description
          };
        }
        return data;
      }
   }

  }, {
  "title": "TXN",
    "fieldMappings": [{
      "fromField": "Open",
      "toField": "open"
    }, {
      "fromField": "High",
      "toField": "high"
    }, {
      "fromField": "Low",
      "toField": "low"
    }, {
      "fromField": "Close",
      "toField": "close"
    }, {
      "fromField": "Volume",
      "toField": "volume"
    }],
  //  "compared": true,
    "categoryField": "Date",
    "dataLoader": {
      "url": "data/TXN.csv",
      "format": "csv",
      "showCurtain": true,
      "showErrors": true,
      "async": true,
      "reverse": true,
      "delimiter": ",",
      "useColumnNames": true
   }
  }],

  "panels": [{
      "title": "Value",
      "percentHeight": 70,

      "stockGraphs": [{
        "type": "candlestick",
        "id": "g1",
        "openField": "open",
        "closeField": "close",
        "highField": "high",
        "lowField": "low",
        "valueField": "close",
        "lineColor": "#fff",
        "fillColors": "#fff",
        "negativeLineColor": "#db4c3c",
        "negativeFillColors": "#db4c3c",
        "fillAlphas": 1,
        "comparedGraphLineThickness": 2,
        "columnWidth": 0.7,
        "useDataSetColors": false,
      //  "comparable": true,
        "compareField": "close",
        "showBalloon": false,
        "proCandlesticks": true
      }],

      "stockLegend": {
        "valueTextRegular": undefined,
        "periodValueTextComparing": "[[percents.value.close]]%"
      },
      "trendLines": [{
    "finalDate": "2014-01-20",
    "finalValue": 29,
    "initialDate": "2013-12-23",
    "initialValue": 37,
    "lineColor": "red",
    "lineAlpha" : 1
}, {
    "finalDate": "2012-01-22",
    "finalValue": 40,
    "initialDate": "2010-01-17",
    "initialValue": 16,
    "lineColor": "#CC0000",
    "lineAlpha" : 1
}],

addStockGraphnew : function(){

}

    }],



  "panelsSettings": {
    "color": "#fff",
    "plotAreaFillColors": "#333",
    "plotAreaFillAlphas": 1,
    "marginLeft": 60,
    "marginTop": 5,
    "marginBottom": 5
  },

  "chartScrollbarSettings": {
    "graph": "g1",
    "graphType": "line",
    "usePeriod": "WW",
    "backgroundColor": "#333",
    "graphFillColor": "#666",
    "graphFillAlpha": 0.5,
    "gridColor": "red",
    "gridAlpha": 1,
    "selectedBackgroundColor": "#444",
    "selectedGraphFillAlpha": 1
  },

  "categoryAxesSettings": {
    "equalSpacing": true,
    "gridColor": "#555",
    "gridAlpha": 1
  },

  "valueAxesSettings": {
    "gridColor": "#555",
    "gridAlpha": 1,
    "inside": false,
    "showLastLabel": true
  },

  "chartCursorSettings": {
    "pan": true,
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true
  },

  "legendSettings": {
    "color": "#fff"
  },

  "stockEventsSettings": {
    "showAt": "high",
    "type": "pin"
  },

  "balloon": {
    "textAlign": "left",
    "offsetY": 10
  },



  "periodSelector": {
    "position": "bottom",
    "periods": [{
      "period": "DD",
      "count": 10,
      "label": "10D"
    }, {
      "period": "MM",
      "count": 1,
      "label": "1M"
    }, {
      "{period}": "MM",
      "count": 6,
      "label": "6M"
    }, {
      "period": "YYYY",
      "count": 1,
      "label": "1Y"
    }, {
      "period": "YYYY",
      "count": 2,
      "selected": true,
      "label": "2Y"
    }, {
      "period": "YTD",
      "label": "YTD"
    }, {
      "period": "MAX",
      "label": "MAX"
    }]
  }
});

////////////////////////////////////////////////////////

     makeChart.prototype.addnewGraph = function(){
   var graph99 = new AmCharts.StockGraph();


       // graph99.title="ne";
        graph99.type = "line";
        graph99.valueField = "close";
        graph99.fillColors = "red";
        graph99.fillAlphas = .5;
        graph99.lineColor = "red";
        graph99.lineThickness = 1;

        graph99.negativeLineColor = "#db4c3c";
        graph99.negativeFillColors = "#db4c3c";
        graph99.useDataSetColors = false;

        (panelname:not sure).addStockGraph( graph99 );
      //  chart.panels = [(panelname :not sure)];
        var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
        categoryAxesSettings.equalSpacing = true;
        chart.categoryAxesSettings = categoryAxesSettings;


}
4

1 回答 1

0

您可以使用chart.panels数组来访问特定面板。

也不需要创建新CategoryAxesSettings对象。该代码是多余的。

最后，您需要chart.validateNow()在添加新图形后调用方法，以便图表知道发生了什么变化。

所以，要重写你的函数：

makeChart.prototype.addnewGraph = function() {
  var graph99 = new AmCharts.StockGraph();

  // graph99.title="ne";
  graph99.type = "line";
  graph99.valueField = "close";
  graph99.fillColors = "red";
  graph99.fillAlphas = .5;
  graph99.lineColor = "red";
  graph99.lineThickness = 1;

  graph99.negativeLineColor = "#db4c3c";
  graph99.negativeFillColors = "#db4c3c";
  graph99.useDataSetColors = false;

  // adding to first panel
  chart.panels[0].addStockGraph( graph99 );

  // taking in the changes
  chart.validateNow();

}
于 2016-01-08T08:04:20.177 回答