我們的支持團隊從客戶那里收到了值得關注的值得關注的問題，展示了我們的JavaScript（HTML5）圖表庫的巨大靈活性，并解釋了在AnyChart的幫助下如何準確地解決高級數據可視化任務。今天的教程是關于JS股票圖表的，更確切地說，我們將深入研究如何使用自定義值繪制當前價格指標，并使用Axis Markers使其即使在縮放和滾動時也可見。

點擊下載AnyChart最新試用版

數據可視化任務

客戶希望我們回答的問題如下：

如何使用自定義值可視化CPI（當前價格指標），使其在滾動或縮放時可見？

事實上，您可以使用我們的AnyStock JavaScript庫制作這樣的股票圖表。在AnyChart JS Charts的8.3.0版本中，它收到了新的Axis Marker功能，在這種情況下將有用，即lineMarker（）  和  textMarker（）  方法。

方案概述

首先，在圖表上繪制一個開 - 高 - 低 - 收盤（OHLC）系列。

之后，創建一個具有自定義值的變量，將其傳遞給行和文本標記，并在滾動和縮放時使它們可見。

軸標記

Axis Markers功能可以輕松創建標記并根據需要進行設置。

這里你需要的第一件事是指定一個這樣的自定義值：

var markerValue = 8200;

設置值后，應將其傳遞給標記的設置：

var lineMarker = plot.lineMarker();lineMarker
 .value(markerValue)
 .scaleRangeMode('consider');
 var textMarker = plot.textMarker();
 textMarker
 .text(markerValue)
 .value(markerValue)

 上面的代碼片段中的  scaleRangeMode（'consideration'）方法使得在比例計算中考慮標記值，確保無論選擇何種數據范圍，標記都是可見的。

這是一個JavaScript（HTML5）股票圖表，其中包含基于自定義價值的CPI。

基于定制價值的當前價格指標的高級可視化

此外，可以從數據計算自定義值。例如，您可以將其作為最后10個“關閉”值的平均值，從最后一個可見值開始：

// advance the iterator to the next position
    while (iterator.advance()) {
      queue.push(iterator.get("close"));      // delete all values except the last 10 
      if (queue.length > 10) {
        queue.shift();
      }
      var sum = 0;      // not enough data - don't draw the axis marker
      if (queue.length < 10) {
        value = null;
      }
      else {        // calculate the marker value
        for (var i = 0;i < queue.length; i++){
          sum = sum + queue[i];
        }
        value = (sum/10).toFixed(2); 
      }
    }
    return value;
  }

由于公式僅包含最后10個值，因此您應設置X標度的最大值和最小值，以便它們正確顯示當前價格指標的值：

var max = xScale.getMaximum();var min = xScale.getFullMinimum();

查看下面生成的交互式可視化。您可以根據 您在AnyChart Playground上喜歡的數據的自定義值，使用CPI修改此JS股票圖表示例。

完整代碼如下：

anychart.onDocumentReady(function () {  // create a data table, load and map the data
  var dataTable = anychart.data.table();
  dataTable.addData(get_dji_daily_short_data());
  var mapping = dataTable.mapAs({'open': 1, 'high': 2, 'low':3, 'close':4});
  
  // create a stock chart
  var chart = anychart.stock();
  // create a plot
  var plot = chart.plot();
  
  // create an OHLC series
  plot.ohlc(mapping).name("Price");
  // get the marker value
  var markerValue = getMarkerValue();
  // create a line marker
  var linemarker = plot.lineMarker();
  linemarker
    .value(markerValue)
    .stroke('black', 1)
    .zIndex(100)
    .scaleRangeMode('consider');
  // create a text marker
  var textMarker = plot.textMarker();
  textMarker
    .text(markerValue||'')
    .value(markerValue)
    .align('left')
    .anchor('left-bottom')
    .padding(3)
    .fontColor('black')
    .zIndex(100);
  // display the chart
  chart.container("container").draw();
  // recalculate the axis marker value when scrolling
  chart.scroller().listen("scrollerchange", function (markerValue) {// get the new marker value
    markerValue = getMarkerValue();
    
    // create a line marker
    linemarker.value(markerValue);
    // set the text marker value and text
    textMarker.text(markerValue||'').value(markerValue);
  });
  // get the value for the axis marker
  function getMarkerValue() {    var xScale = chart.xScale();    // get the start and end dates
    var max = xScale.getMaximum();    var min = xScale.getFullMinimum();
    var selectable = mapping.createSelectable();    // select a date range
    selectable.select(min, max);
    var queue = [];    var value = null;
    // get the iterator 
    var iterator = selectable.getIterator();    // advance the iterator to the next position
    while (iterator.advance()) {
      queue.push(iterator.get("close"));      // delete all values except the last 10 
      if (queue.length > 10) {
        queue.shift();
      }
      var sum=0;      // not enough data - don't draw the axis marker
      if (queue.length < 10) {
        value = null;
      }
      else {        // calculate the marker value
        for (var i = 0;i < queue.length; i++){
          sum = sum + queue[i];
        }
        value = (sum/10).toFixed(2); 
      }
    }
    return value;
  }});

想要購買Anychart正版授權的朋友可以。

有關產品資訊的更多精彩內容，敬請關注下方的微信公眾號▼▼▼