Question

我用ChartJS制作了一张图表。数据来自我用AJAX调用的API。

之前，该线会出现，但现在它不再显示，只有点显示。我没有在禁用该行的设置中更改任何内容。

linegraph的代码是：

$(document).ready(function(){
$.ajax({
url : "https://api.makesenz2.nl/api/client/v1/most_recent_sensor_data.json?api_token=fa52b52c2408790444effb78475b13a4&identifier=m2GyXo84qb&amount_of_items=100&type=json",
type : "GET",
success : function(data){
  console.log(data);



Chart.pluginService.register({
  beforeDraw: function (chart, easing) {
    if (chart.config.options.chartArea && 
chart.config.options.chartArea.backgroundColor) {
      var helpers = Chart.helpers;
      var ctx = chart.chart.ctx;
      var chartArea = chart.chartArea;

      ctx.save();
      ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
      ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
      ctx.restore();
    }
  }
});


var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");



ctx.height = 5000;


var opacity = 0.15;
 var gradient = ctx.createLinearGradient(0,200,0,0);
        gradient.addColorStop(0,'rgba(234,23,68,'+opacity+')');//rood
        gradient.addColorStop(0.12,'rgba(234,23,68,'+opacity+')');//rood
        gradient.addColorStop(0.12,'rgba(239,131,21,'+opacity+')');//oranje
        gradient.addColorStop(0.25,'rgba(239,131,21,'+opacity+')');//oranje
        gradient.addColorStop(0.25,'rgba(81,197,63,'+opacity+')');//groen
        gradient.addColorStop(0.42,'rgba(81,197,63,'+opacity+')');//groen
        gradient.addColorStop(0.42,'rgba(239,131,21,'+opacity+')');//oranje
        gradient.addColorStop(0.63,'rgba(239,131,21,'+opacity+')');//oranje
        gradient.addColorStop(0.63,'rgba(234,23,68,'+opacity+')');//rood
        gradient.addColorStop(1,'rgba(234,23,68,'+opacity+')');//rood
        ctx.fillStyle = gradient;
        ctx.fillRect(0,0,200,200);



  var datetime = [];
  var temperature = [];
  var humidity = [];
  var co2 = [];

  for(var i in data) {
    datetime.push("datetime" + data[i].datetime);
    temperature.push(data[i].temperature);
    humidity.push(data[i].humidity);
    co2.push(data[i].co2);
  }



  var chartdata = {
    labels: datetime,
    datasets: [
      {
        label: "Temperatuur",
        fill: true,

        //lineTension: 0.01,
        backgroundColor: 'white',
        borderColor: 'white',
        pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
        pointHoverBorderColor: "rgba(59, 89, 152, 1)",
        data: temperature,
        showLine: true,
        //radius: 0,
      }
              ]



  };

  // Configuration options go here




  var ctx = $("#mycanvas");

  var LineGraph = new Chart(ctx, {
    type: 'line',
    data: chartdata,
    //responsive: true,
    options: {
        //maintainAspectRatio: false,
        chartArea: {
            backgroundColor: gradient,
        },

  scales: {
        xAxes: [{
            /*type: 'time',
                time: {
                    unit: 'month',
                }
                ticks: {beginAtZero: true},
                suggestedMin: 0,
                suggestedMax: 288,
                stepSize: 1,
                //maxTicksLimit: 288,
            */
            }],


    yAxes: [{
        display: true,
        position: 'right',
        ticks: {
            suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
            suggestedMax: 30,
            // OR //
            //beginAtZero: true;   // minimum value will be 0.

        }
    }]
            }
}

  });
},
error : function(data) {

}
});
});

会有阻挡线的东西吗？

Answer 1

对于任何寻求该问题答案的人：you might need在图形选项下启用spanGaps: true。

Chartjs只显示点，线未显示

1 个答案: