フラッシュ/点滅チャートcanvasjsを使用して

ダッシュボードを開発している間、開発者はそれを強調するためにチャートの中でコラム/バーを点滅させるか、それを他のすべてのコラム/バーと異なるようにする必要があります、あるいは、時々、それはStockchartの販売/購入incaseのような情報を示すために、データラベルを点滅させることになるかもしれません.これは簡単にCanvasjsチャート/StockChartで達成することができます.以下は、サンプルコード＆ライブの例と同じように簡単なチュートリアルです.

必要条件

CanvasJS

カラムチャートの作成

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Basic Column Chart"
  },
  data: [{              
    dataPoints: [
      { label: "apple",  y: 10 },
      { label: "orange", y: 15 },
      { label: "banana", y: 25 },
      { label: "mango",  y: 30 },
      { label: "grape",  y: 28 }
    ]
  }]
});

chart.render();

列への点滅効果の追加

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Blinking Column Chart"
  },
  data: [{              
    dataPoints: [
      { label: "apple",  y: 10 },
      { label: "orange", y: 15 },
      { label: "banana", y: 25, color: "#FFAA02", blinkColors: ["#FFAA02", "#6AFF05"] },
      { label: "mango",  y: 30 },
      { label: "grape",  y: 28 }
    ]
  }]
});

blinkColumns(chart);
chart.render();

function blinkColumns(chart) {
  var k = 0;
  var interval = setInterval(function() {

    for(var i = 0; i < chart.options.data.length; i++) {
      for(var j = 0; j < chart.options.data[i].dataPoints.length; j++) {
        dataPoint = chart.options.data[i].dataPoints[j];
        if(dataPoint.blinkColors) {
          dataPoint.color = dataPoint.blinkColors[k++ % dataPoint.blinkColors.length];
        }
      }
    }   
    chart.render();
  }, 500);
}

以下はStockChart インデックスラベル/データラベルを点滅して.
チェックアウトCanvasJS Gallery ダウンロード可能なサンプルでより多くの例のために.