FusionCharts实时行锚点

发布于 2025-01-31 16:59:56 字数 639 浏览 2 评论 0原文

我想将AnchorbgColor属性用于实时线图。实时线图。

        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 for for Anchorbgcolor这个图表？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长安忆 2025-02-07 16:59:56

如果您想拥有所有要点相同的颜色，那么您所要做的就是将anchorbgcolor属性包含在图表对象中，

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

如果要在添加颜色时要更改颜色，则可以操纵图表数据对象并使用setjSondataa而不是使用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);

});

示例可以看到在这里

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

回复收藏 0 原文

情深缘浅 2025-02-07 16:59:56

您可以使用 anchorbgcolor 属性来更改锚固背景颜色

    {
    "chart": {
        "anchorRadius": "6",
        "anchorBorderThickness": "2",
        "anchorBorderColor": "#127fcb",
        "anchorSides": "3",
        "anchorBgColor": "#d3f7ff"
    }
}

，以了解有关锚点属性的更多信息，请参阅 this

实时锚点demofiddle 在这里

You can use anchorBgColor attributes to change anchor background color

    {
    "chart": {
        "anchorRadius": "6",
        "anchorBorderThickness": "2",
        "anchorBorderColor": "#127fcb",
        "anchorSides": "3",
        "anchorBgColor": "#d3f7ff"
    }
}

To know more about Anchor properties refer this

Real-time anchor demoFiddle here

回复收藏 0 原文

~没有更多了~