Javascript Chartjs:以一年跨度显示的多行年份数据集

Javascript Chartjs:以一年跨度显示的多行年份数据集,javascript,jquery,chart.js,chart.js2,Javascript,Jquery,Chart.js,Chart.js2,我用下面的代码创建了这个图表,数据比较需要几年的时间。我有一个类似于下面的数据集,但每个数据集可以比另一个数据集短或长 { label: 2013, data: [{y: 266, x: 02/29/2013},{ y: 311, x: 04/01/2013}]}, { label: 2014, data: [{y: 403, x: 01/09/2014},{ y: 705, x: 08/01/2014},{ y: 885, x: 12/05/2014}]}, { label: 2014, da

我用下面的代码创建了这个图表,数据比较需要几年的时间。我有一个类似于下面的数据集,但每个数据集可以比另一个数据集短或长

{ label: 2013, data: [{y: 266, x: 02/29/2013},{ y: 311, x: 04/01/2013}]},
{ label: 2014, data: [{y: 403, x: 01/09/2014},{ y: 705, x: 08/01/2014},{ y: 885, x: 12/05/2014}]},
{ label: 2014, data: [{y: 550, x: 04/12/2015}]}
现在,此代码将生成一个如下所示的图表:

我想让它画成这样,从一月到十二月,但可以在这两者之间的每一天(数据点)阅读工具提示:

对于数据的格式是否应该不同,或者是否可以使用图表属性,有什么建议吗

//loop through each year to build our objects needed for the chart
$.each(jsonData.results, function(i, row) {
  data = row.dt;
  CumulativeDayTotal = 0
  yAxis = [];

  $.each(data, function(i, row) {
    CumulativeDayTotal = parseInt(row[yValueKey]) + parseInt(CumulativeDayTotal);
    formattedDate = new Date(row["DATE_F"]);
    formattedDate = (formattedDate.getMonth() + 1) + '/' + formattedDate.getDate() + '/' + formattedDate.getFullYear();

    yAxis.push("{ y: " + CumulativeDayTotal + ", x: '" + formattedDate + "'}");
  });

  //create color for each new line/year
  lineColor = dynamicColors();

  chartPlaceHolders += '{label:"' + row.year + '", data:[' + yAxis + '],' +
    'fill: false,' +
    'lineTension: 0.1,' +
    'backgroundColor: "' + lineColor + '",' +
    'borderColor: "' + lineColor + '",' +
    'borderCapStyle: "butt",' +
    'borderDash: [],' +
    'borderDashOffset: 0.0,' +
    'borderJoinStyle: "miter",' +
    'pointBorderColor: "rgba(75,192,192,1)",' +
    'pointBackgroundColor: "#fff",' +
    'pointBorderWidth: .2,' +
    'pointHoverRadius: 5,' +
    'pointHoverBackgroundColor: "rgba(75,192,192,1)",' +
    'pointHoverBorderColor: "rgba(220,220,220,1)",' +
    'pointHoverBorderWidth: 0,' +
    'pointRadius: .5,' +
    'pointHitRadius: 1' +
    '},';

});
}
//remove last comma from string
chartPlaceHolders = chartPlaceHolders.replace(/,\s*$/, "");
chartPlaceHolders = "[" + chartPlaceHolders + "]";

var initFields = eval("(" + chartPlaceHolders + ")");

//call newly created elements into a variable to pass along to the other functions
var ctx = $("#primaryChart")[0].getContext("2d");

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: initFields
  },
  options: {
    scales: {
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: yAxisLabel
        }
      }],
      xAxes: [{
        type: 'time',
        time: {
          unit: 'month',
          displayFormats: {
            max: 'December',
            min: 'January',
            //max: moment().startOf('year'),
            //min: moment().endOf('year'),
            'millisecond': 'MMMM',
            'second': 'MMMM',
            'minute': 'MMMM',
            'hour': 'MMMM',
            'day': 'MMMM',
            'week': 'MMMM',
            'month': 'MMMM',
            'quarter': 'MMMM',
            'year': 'MMMM',
          }
        },
        scaleLabel: {
          display: true,
          labelString: xAxisLabel
        }
      }]
    }
  }
});

你找到解决办法了吗?是的,试着这么做。如能找到解决办法,将不胜感激。