Fusioncharts 实时线锚bgclor

Question

I want to use anchorBgColor attribute for Real-time Line chart. 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);
        }

Could you recommend how to change anchorBgColor for this chart?

Answer 1

If you are wanting to have all the points the same color all you have to do is include the anchorBgColor property in the chart object

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

If you want points to change colors as you add them you have manipulate the chart data object and use setJSONData rather than using the feedData method.

<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);

});

Example can be seen here