代码没有采取正确的麻木

时间:2016-10-04 20:24:04

标签: javascript chart.js

我的javascript代码没有取值的数字,他只取121取最小数字,2取最大数字。我必须做一些不同的事情来获得价值数字?

的jsfiddle

var valor1 = document.getElementById('myChart31').value,
  nome1 = document.getElementById('myChart31').name,
  valor2 = document.getElementById('myChart32').value,
  nome2 = document.getElementById('myChart32').name;

Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
      height = chart.chart.height,
      ctx = chart.chart.ctx,
      type = chart.config.type;

    if (type == 'doughnut') {
      var percent = Math.round((chart.config.data.datasets[0].data[0] * 100) /
        (chart.config.data.datasets[0].data[0] +
          chart.config.data.datasets[0].data[1]));
      var oldFill = ctx.fillStyle;
      var fontSize = ((height - chart.chartArea.top) / 100).toFixed(2);

      ctx.restore();
      ctx.font = fontSize + "em sans-serif";
      ctx.textBaseline = "middle"

      var text = percent + "%",
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = (height + chart.chartArea.top) / 2;

      ctx.fillStyle = chart.config.data.datasets[0].backgroundColor[0];
      ctx.fillText(text, textX, textY);
      ctx.fillStyle = oldFill;
      ctx.save();
    }
  }
});


var config = {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [
        valor1,
        valor2,
      ],
      backgroundColor: [
        "#F7464A",
        "#46BFBD",
      ],
      label: 'Expenditures'
    }],
    labels: [
      nome1 + ": " + valor1,
      nome2 + ": " + valor2,
    ]
  },
  options: {
    responsive: true,
    legend: {
      position: 'bottom',
    },
    title: {
      display: true,
      text: 'Pedro Henrique Kuzminskas Miyazaki de Souza'
    },
    animation: {
      animateScale: true,
      animateRotate: true
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var dataset = data.datasets[tooltipItem.datasetIndex];
          var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
            return previousValue + currentValue;
          });
          var currentValue = dataset.data[tooltipItem.index];
          var precentage = Math.floor(((currentValue / total) * 100) + 0.5);
          return precentage + "%";
        }
      }
    }
  }
};


var ctx = document.getElementById("myChart3").getContext("2d");
window.myDoughnut = new Chart(ctx, config); {

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script>
<canvas id="myChart3">
  <input type="hidden" id="myChart31" name="Pedro" value="50">
  <input type="hidden" id="myChart32" name="Henrique" value="50">
</canvas>

0 个答案:

没有答案