Fusioncharts实时线anchorbgclor

Question

我想为实时折线图使用 anchorBgColor 属性。 Real-time Line chart.

        function updateData() {
           var t = new Date(),
              date =
                 t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds(),
              val = Math.floor(Math.random() * (7800 - 7200 + 1)) + 7200,
              strData = "&label=" + date + "&value=" + val;

           // Feed it to chart.
           chartRef.feedData(strData);
        }

你能推荐一下如何更改此图表的 anchorBgColor 吗？

Answer 1

如果您想让所有的点都具有相同的颜色，您只需在图表对象中包含 anchorBgColor 属性

{
...
  dataSource: {
    chart: {
      ...
      anchorBgColor: "#26aa5a"
    }
  }
}

如果您希望点在添加时改变颜色，您可以操作图表数据对象并使用 setJSONData 而不是使用 feedData 方法。

<div id="chart-container">FusionCharts will render here</div>

FusionCharts.ready(function() {
  var chartObj = new FusionCharts({
    type: 'line',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "anchorRadius": "6",
        "theme": "fusion"

      },
      "data": []
    }
  });
  chartObj.render();

    function pushNewPoint() {
    var t = new Date(),
        date =
        t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds(),
        val = Math.floor(Math.random() * (7800 - 7200 + 1)) + 7200,
        randomColor = Math.floor(Math.random()*16777215).toString(16)

    newEntry = {
      label: date,
      value: val,
      anchorBgColor: "#" + randomColor
    }

    chartData = chartObj.getChartData('json')
    chartData.data.push(newEntry)

    chartObj.setJSONData(chartData)
  }
  
  var counter = 0;
  var i = setInterval(function(){
      pushNewPoint()

      counter++;
      if(counter === 10) {
        clearInterval(i);
      }
    }, 1000);

});

例子可见here

Fusioncharts实时线anchorbgclor

Fusioncharts Real-time Line anchorbgclor

javascript

fusioncharts