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

點(diǎn)擊下載AnyChart最新試用版

數(shù)據(jù)可視化任務(wù)

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

如何使用自定義值可視化CPI（當(dāng)前價(jià)格指標(biāo)），使其在滾動或縮放時(shí)可見？

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

方案概述

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

之后，創(chuàng)建一個(gè)具有自定義值的變量，將其傳遞給行和文本標(biāo)記，并在滾動和縮放時(shí)使它們可見。

軸標(biāo)記

Axis Markers功能可以輕松創(chuàng)建標(biāo)記并根據(jù)需要進(jìn)行設(shè)置。

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

var markerValue = 8200;

設(shè)置值后，應(yīng)將其傳遞給標(biāo)記的設(shè)置：

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

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

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

基于定制價(jià)值的當(dāng)前價(jià)格指標(biāo)的高級可視化

此外，可以從數(shù)據(jù)計(jì)算自定義值。例如，您可以將其作為最后10個(gè)“關(guān)閉”值的平均值，從最后一個(gè)可見值開始：

// 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個(gè)值，因此您應(yīng)設(shè)置X標(biāo)度的最大值和最小值，以便它們正確顯示當(dāng)前價(jià)格指標(biāo)的值：

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

查看下面生成的交互式可視化。您可以根據(jù) 您在AnyChart Playground上喜歡的數(shù)據(jù)的自定義值，使用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正版授權(quán)的朋友可以。

有關(guān)產(chǎn)品資訊的更多精彩內(nèi)容，敬請關(guān)注下方的微信公眾號▼▼▼