更新

Question

这个简单的doghnut图表每秒钟在圆圈上重新呈现一小块灰色，60次 https://jsfiddle.net/1xe7dhao/
（根据stackoverflow发布，他们将永远保存）

我可以看到，在javascript的第24行，更新过程在60步后停止，但是我在第26和27行上有点模糊：

theChart.segments[0].value = theChart.segments[0].value+1
theChart.segments[1].value = theChart.segments[1].value-1

它看起来像segment [0]，是我认为圆圈上的第一段，设置为+1值，下一段[1]设置为-1。

但是不一定要从segment [0]到segment [60]并改变它们的颜色....这段代码如何将灰色变为绿色？

Answer 1

只有两段灰色和绿色，

chartData = [{
                value: 0,
                color: '#4FD134' //ugly green
            },{
                value: max_value,
                color: '#DDDDDD' //grey
            }];

所以增加第一个减少第二个就会产生这种效果。

Answer 2

图表有 2段：绿色和灰色。

两个细分都有一个值。绿色将从0开始 - 您无法在开头看到绿色部分。灰色从60开始 - 全圆

theChart.segments[0].value = theChart.segments[0].value + 1

此行将第一个段（绿色）的值增加一个。

theChart.segments[1].value = theChart.segments[1].value - 1

第二行是将第二段（灰色）的值减一（

）

以下是每秒显示绿色和灰色值的代码段

＆＃13;

$(document).ready(function() {

  var max_value = 60

  chartOptions = {
    segmentShowStroke: false,
    percentageInnerCutout: 75,
    animation: false
  };

  chartData = [{
    value: 0,
    color: '#4FD134' //ugly green
  }, {
    value: max_value,
    color: '#DDDDDD' //grey
  }];

  var ctx = $('#chart').get(0).getContext("2d");
  var theChart = new Chart(ctx).Doughnut(chartData, chartOptions);

  theInterval = setInterval(function() {
    if (theChart.segments[0].value === max_value) {
      clearInterval(theInterval);
    } else {
      console.log("GREEN = " + theChart.segments[0].value);
      console.log("GRAY = " + theChart.segments[1].value);
      console.log("***");
      theChart.segments[0].value = theChart.segments[0].value + 1
      theChart.segments[1].value = theChart.segments[1].value - 1
      theChart.update()
    }
  }, 1000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<canvas id="chart" width="300" height="300"></canvas>

＆＃13;

更新

您可以为自己设置所需的值。所有段的总和值必须等于60

＆＃13;

$(document).ready(function() {

  var max_value = 60

  chartOptions = {
    segmentShowStroke: false,
    percentageInnerCutout: 75,
    animation: false
  };

  chartData = [{
    value: 0,
    color: '#4FD134' //ugly green
  }, {
    value: max_value,
    color: '#DDDDDD' //grey
  }];

  var ctx = $('#chart').get(0).getContext("2d");
  var theChart = new Chart(ctx).Doughnut(chartData, chartOptions);

  theChart.segments[0].value = 30;
  theChart.segments[1].value = 30;
  theChart.update()
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<canvas id="chart" width="300" height="300"></canvas>

＆＃13;

Answer 3

chartData数组将甜甜圈分成两段，颜色为灰色和绿色。绿色具有索引[0]而灰色具有索引[1]。在脚本的开头，charData [0]的值为0，charDate [1]为60，因为整个Donut的值为60。现在，你在那里的两条线将绿色的大小增加1，并在每次调用时将灰色的大小减小1.

这个javascript如何重新着色doghnut？

3 个答案:

更新