2016-09-27 61 views
0

當我添加guidesvalueAxesSettings,但它不起作用,即使我選擇valueAxesSettingsvalueAxes。 此外,valueAxesSettingsvalueAxes之間有什麼區別,作爲參考說If you change a property after the chart is initialized, you should call stockChart.validateNow() method in order for it to work.?這是什麼意思?Amcharts指南

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>My first stock chart</title> 
<link rel="stylesheet" href="amcharts/style.css" type="text/css"> 

<script src="//www.amcharts.com/lib/3/amcharts.js"></script> 
<script src="//www.amcharts.com/lib/3/serial.js"></script> 
<script src="//www.amcharts.com/lib/3/themes/light.js"></script> 
<script src="//www.amcharts.com/lib/3/amstock.js"></script> 

<style> 
    #chartdiv { 
     width: 100%; 
     height: 500px; 
     font-size: 11px; 
    } 
</style> 

<script type="text/javascript"> 
     AmCharts.makeChart("chartdiv", { 
      "type": "stock", 
      "dataDateFormat": "YYYY-MM-DD", 
      "dataSets": [ { 
       "dataProvider": [ { 
        "date": "2011-06-01", 
        "val": 10 
       }, { 
        "date": "2011-06-02", 
        "val": 11 
       }, { 
        "date": "2011-06-03", 
        "val": 12 
       }, { 
        "date": "2011-06-04", 
        "val": 11 
       }, { 
        "date": "2011-06-05", 
        "val": 10 
       }, { 
        "date": "2011-06-06", 
        "val": 11 
       }, { 
        "date": "2011-06-07", 
        "val": 13 
       }, { 
        "date": "2011-06-08", 
        "val": 14 
       }, { 
        "date": "2011-06-09", 
        "val": 17 
       }, { 
        "date": "2011-06-10", 
        "val": 13 
       } ], 
       "fieldMappings": [ { 
        "fromField": "val", 
        "toField": "value" 
       } ], 
       "categoryField": "date" 
      } ], 

      "panels": [ { 

       "legend": {}, 

       "stockGraphs": [ { 
        "id": "graph1", 
        "valueField": "value", 
        "type": "line", 
        "title": "MyGraph", 
        "fillAlphas": 0 
       } ] 
      } ], 

      "panelsSettings": { 
       "startDuration": 1 
      }, 

      "categoryAxesSettings": { 
       "dashLength": 5 
      }, 

      "valueAxesSettings": { 
       "dashLength": 13, 
       "guides": { 
        "value": 10, 
        "tovalue": 12, 
        "lineColor": "#CC0000", 
        "lineAlpha": 1, 
        "fillAlpha": 0.2, 
        "fillColor": "#CC0000", 
        "dashLength": 2, 
        "inside": true, 
       } 
      }, 

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

      "chartCursorSettings": { 
       "valueBalloonsEnabled": true 
      }, 

      "periodSelector": { 
       "periods": [ { 
        "period": "DD", 
        "count": 1, 
        "label": "1 day" 
       }, { 
        "period": "DD", 
        "selected": true, 
        "count": 5, 
        "label": "5 days" 
       }, { 
        "period": "MM", 
        "count": 1, 
        "label": "1 month" 
       }, { 
        "period": "YYYY", 
        "count": 1, 
        "label": "1 year" 
       }, { 
        "period": "YTD", 
        "label": "YTD" 
       }, { 
        "period": "MAX", 
        "label": "MAX" 
       } ] 
      } 
     }); 
</script> 
</head> 
<body> 
<div id="chartdiv"></div> 
</body> 
</html> 
+0

在圖表初始化後更改屬性時,您需要調用validateNow(),以便使用新的(更改的)設置重繪圖形。你也調用validateData(),但它是可選的。 – Anurag

+0

要擴展@ Anurag的評論,您在更改圖表數據時使用'validateData'。除非將第一個參數設置爲true,否則「validateNow」不會默認處理該參數,例如, 'validateNow(true,false)'等同於'validateData()'。 – xorspark

回答

1

valueAxesSettingsvalueAxes一個全球性的版本 - 你valueAxesSettings設置任何事情都會被應用到所有股票的面板valueAxes對象。如果你想覆蓋或在面板valueAxes的一個設置特定的設置,可以設置一個valueAxes面板內:

"panels": [{ 
    "valueAxes":[{ 
    //settings specific to this panel 
    }], 
    // ... 
}, { 
    "valueAxes": [{ 
    //settings specific to this panel 
    }] 
} 

guides屬性是一個數組。你將它設置爲單個對象,這是不正確的。此外,該屬性被稱爲toValue,而不是「tovalue」 - 套管是重要的。這裏的修正valueAxesSettings對象:

"valueAxesSettings": { 
    "dashLength": 13, 
    "guides": [{ 
     "value": 10, 
     "toValue": 12, 
     "lineColor": "#CC0000", 
     "lineAlpha": 1, 
     "fillAlpha": 0.2, 
     "fillColor": "#CC0000", 
     "dashLength": 2, 
     "inside": true 
    }] 
    }, 

演示:

AmCharts.makeChart("chartdiv", { 
 
    "type": "stock", 
 
    "dataDateFormat": "YYYY-MM-DD", 
 
    "dataSets": [{ 
 
    "dataProvider": [{ 
 
     "date": "2011-06-01", 
 
     "val": 10 
 
    }, { 
 
     "date": "2011-06-02", 
 
     "val": 11 
 
    }, { 
 
     "date": "2011-06-03", 
 
     "val": 12 
 
    }, { 
 
     "date": "2011-06-04", 
 
     "val": 11 
 
    }, { 
 
     "date": "2011-06-05", 
 
     "val": 10 
 
    }, { 
 
     "date": "2011-06-06", 
 
     "val": 11 
 
    }, { 
 
     "date": "2011-06-07", 
 
     "val": 13 
 
    }, { 
 
     "date": "2011-06-08", 
 
     "val": 14 
 
    }, { 
 
     "date": "2011-06-09", 
 
     "val": 17 
 
    }, { 
 
     "date": "2011-06-10", 
 
     "val": 13 
 
    }], 
 
    "fieldMappings": [{ 
 
     "fromField": "val", 
 
     "toField": "value" 
 
    }], 
 
    "categoryField": "date" 
 
    }], 
 

 
    "panels": [{ 
 

 
    "valueAxes": [{ 
 

 
    }], 
 

 
    "legend": {}, 
 

 
    "stockGraphs": [{ 
 
     "id": "graph1", 
 
     "valueField": "value", 
 
     "type": "line", 
 
     "title": "MyGraph", 
 
     "fillAlphas": 0 
 
    }] 
 
    }], 
 

 
    "panelsSettings": { 
 
    "startDuration": 1 
 
    }, 
 

 
    "categoryAxesSettings": { 
 
    "dashLength": 5 
 
    }, 
 

 
    "valueAxesSettings": { 
 
    "dashLength": 13, 
 
    "guides": [{ 
 
     "value": 10, 
 
     "toValue": 12, 
 
     "lineColor": "#CC0000", 
 
     "lineAlpha": 1, 
 
     "fillAlpha": 0.2, 
 
     "fillColor": "#CC0000", 
 
     "dashLength": 2, 
 
     "inside": true 
 
    }] 
 
    }, 
 

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

 
    "chartCursorSettings": { 
 
    "valueBalloonsEnabled": true 
 
    }, 
 

 
    "periodSelector": { 
 
    "periods": [{ 
 
     "period": "DD", 
 
     "count": 1, 
 
     "label": "1 day" 
 
    }, { 
 
     "period": "DD", 
 
     "selected": true, 
 
     "count": 5, 
 
     "label": "5 days" 
 
    }, { 
 
     "period": "MM", 
 
     "count": 1, 
 
     "label": "1 month" 
 
    }, { 
 
     "period": "YYYY", 
 
     "count": 1, 
 
     "label": "1 year" 
 
    }, { 
 
     "period": "YTD", 
 
     "label": "YTD" 
 
    }, { 
 
     "period": "MAX", 
 
     "label": "MAX" 
 
    }] 
 
    } 
 
});
#chartdiv { 
 
    width: 100%; 
 
    height: 500px; 
 
    font-size: 11px; 
 
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="//www.amcharts.com/lib/3/serial.js"></script> 
 
<script src="//www.amcharts.com/lib/3/themes/light.js"></script> 
 
<script src="//www.amcharts.com/lib/3/amstock.js"></script> 
 

 
<div id="chartdiv"></div>

關於validateNow,如果你在你的股票圖表對象更改屬性,需要調用validateNow重繪圖表與您的新設置。當您對dataSets/dataProvider進行更改時,主要使用validateData