javascript - Amcharts 通过 SSE 使指导线值(value)动态化

Question

我正在尝试向 amcharts 添加一行，如下图所示:

它在 amcharts 中可用，但仅在悬停时可用，我想添加它，以便它始终存在，无需悬停，我尝试使用 Am 图表指南，如下所示:

                "guides": [{
                        "valueField":"high",                      
                          "value": this part need to be dynamic,
                          "lineAlpha": 1,
                          "lineThickness": 1,
                          "lineColor": "#fff",
                          "label": 'high'
                            }],

这样线路就可以工作，但需要绘制一个值，我希望该值是动态的并随服务器发送事件而变化，

Answer 1

您可以在获取服务器事件后添加指南和/或根据应用的结构进行更改。对图表属性或数据的任何添加或更改都需要您调用图表实例的 validateData()方法。

用于添加新指南(假设常规序列图表中的指南插入到配置的顶层):

chartInstance.guides.push({
  "value": /*your value here*/,
  "lineAlpha": 1,
  "lineThickness": 1,
  "lineColor": "#fff",
  "label": 'high'
});
chartInstance.validateData();

用于更新指南(假设您要更新数组中的第一个指南):

//assuming you're updating the first guide in the array:
chartInstance.guides[0].value = /*new value*/
chartInstance.validateData();

请注意，指南没有有 valueField。您可以查看完整的属性列表here .

下面是一个演示，它添加了一个引用线，然后每三秒随机更改一次引用线位置来演示:

function generateChartData() {
  var firstDate = new Date();
  var chartData = [];
  firstDate.setHours(0, 0, 0, 0);
  firstDate.setDate(firstDate.getDate() - 30);

  for (var i = 0; i < 30; i++) {
    var newDate = new Date(firstDate);

    newDate.setDate(newDate.getDate() + i);

    var open = Math.round(Math.random() * 30 + 100);
    var close = open + Math.round(Math.random() * 15 - Math.random() * 10);

    var low;
    if (open < close) {
      low = open - Math.round(Math.random() * 5);
    } else {
      low = close - Math.round(Math.random() * 5);
    }

    var high;
    if (open < close) {
      high = close + Math.round(Math.random() * 5);
    } else {
      high = open + Math.round(Math.random() * 5);
    }

    var value = Math.round(Math.random() * 30 + 100);

    chartData[i] = {
      date: newDate,
      open: open,
      close: close,
      high: high,
      low: low,
      value: value
    };
  }
  return chartData;
}

var chart = AmCharts.makeChart("chartdiv", {
  type: "serial",
  theme: "black",
  dataProvider: generateChartData(),
  valueAxes: [
    {
      position: "right"
    }
  ],
  graphs: [
    {
      type: "candlestick",
      valueField: "value",
      openField: "open",
      highField: "high",
      lowField: "low",
      closeField: "close",
      lineColor: "#7f8da9",
      fillColors: "#7f8da9",
      negativeLineColor: "#db4c3c",
      negativeFillColors: "#db4c3c",
      fillAlphas: 1
    }
  ],
  categoryField: "date",
  categoryAxis: {
    parseDates: true,
    equalSpacing: true
  }
});

//simulating events using a 3 second interval
setInterval(function() {
  if (chart.guides.length) {
    chart.guides[0].value = Math.floor(Math.random() * 30 + 100);
  } else {
    chart.guides.push({
      value: Math.floor(Math.random() * 30 + 100),
      lineAlpha: 1,
      lineThickness: 1,
      lineColor: "#fff",
      inside: true,
      label: "high"
    });
  }
  chart.validateData();
}, 3000);

#chartdiv {
  width: 100%;
  height: 300px;
  background: #0d0d0d;
}

<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/black.js"></script>

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