Question

我遇到的问题是我的图表中的最后一个泡沫被切断了。我需要一种扩展图表的方法，以便显示整个圆圈。我已经尝试了从添加额外值到结束，到调整填充的所有内容。似乎没什么用。不幸的是，气候图表上的Chart JS文档也非常缺乏。

var randomScalingFactor = function() {
  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
var randomColorFactor = function() {
  return Math.round(Math.random() * 255);
};
var randomColor = function() {
  return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
};

var bubbleChartData = {
  animation: {
    duration: 10000
  },
  datasets: [{
    label: "My First dataset",
    backgroundColor: randomColor(),
    data: [
      {
        x: 10,
        y: 0,
        r: Math.abs(randomScalingFactor()) / 5,
      }, {
        x: 20,
        y: 0,
        r: Math.abs(randomScalingFactor()) / 5,
      }, {
        x: 30,
        y: 0,
        r: Math.abs(randomScalingFactor()) / 5,
      }, {
        x: 40,
        y: 0,
        r: Math.abs(randomScalingFactor()) / 5,
      }, {
        x: 50,
        y: 0,
        r: Math.abs(randomScalingFactor()) / 5,
      }, {
        x: 60,
        y: 0,
        r: Math.abs(randomScalingFactor()) / 5,
      }, {
        x: 70,
        y: 0,
        r: 30,
      }]
  }]
};

var ctx = document.getElementById('Chart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bubble',
  data: bubbleChartData
})

JSFiddle：https://jsfiddle.net/wf69c7uu/2/

https://jsfiddle.net/3dog0bec/

Answer 1

我通过修改xAxes ticks min和max解决了这个问题。这是有效的，因为我有一定数量的数据要显示，所以我只是将值设置为比第一个数据点小10，比最后一个数据点多10。

$('#btnSend').click(function() {
    var dataOut = $('#send');
    var data = {
        userOut: dataOut.val()
    };
    $.post("http://troncon.ca/ESO/test.php", data, function(data, status) {
        alert("Data saved ");
    });
});
$('#btnReceive').click(function() {
    var dataIn = $('#receive');
    var data = {
        userIn: ''
    };
    $.post("http://troncon.ca/ESO/test.php", data, function(data, status) {
        dataIn.val(data);
    });
});

在Chart.js中泡沫被切断

1 个答案: