跨平台图表控件AnyChart教程:如何使用自定义值可视化CPI

翻译|使用教程|编辑:吴园园|2019-07-23 10:13:21.593|阅读 22 次

概述:AnyChart是灵活的高度可定制的跨浏览器、跨平台JavaScript (HTML5) 图表控件。今天的教程是关于JS股票图表的,更确切地说,我们将深入研究如何使用自定义值绘制当前价格指标,并使用Axis Markers使其即使在缩放和滚动时也可见。

AnyChart教程:当前价格指标与JavaScript股票图表中的自定义价值和规模计算

我们的支持团队从客户那里收到了值得关注的值得关注的问题,展示了我们的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。

AnyChart教程:当前价格指标与JavaScript股票图表中的自定义价值和规模计算

基于定制价值的当前价格指标的高级可视化

此外,可以从数据计算自定义值。例如,您可以将其作为最后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教程:当前价格指标与JavaScript股票图表中的自定义价值和规模计算

完整代码如下:

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正版授权的朋友可以咨询慧都官方客服

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

AnyChart教程:当前价格指标与JavaScript股票图表中的自定义价值和规模计算 



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:AnyChart https://www.anychart.com/blog/2018/09/19/current-price-indicator-custom-value-scale-calculation-javascript-stock-charts/

登录慧都网发表评论登录


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
AnyChart

灵活的高度可定制的跨浏览器、跨平台JavaScript (HTML5) 图表控件。

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat