Question

尝试在我的amCharts股票图表中添加趋势线。图表已正确创建和显示，但我无法使用图表添加趋势线。

function createEvent() {
 alert( "inside createEvent" );
 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]]%"
     }

   } ],



   "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
   },

   "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
   } ],

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

Answer 1

trendLines需要进入特定的面板设置。该图表不会在主图表配置中查找趋势线数据。

"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
 } ]

} ]

趋势线未显示在amCharts中

1 个答案: