彩票走势图

我们的支持团队从客户那里收到了值得关注的值得关注的问题，展示了我们的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正版授权的朋友可以。

有关产品资讯的更多精彩内容，敬请关注下方的微信公众号▼▼▼