how can I show only 2 numbers on the xAxe in Chartjs having more than two numbers on the chart? (line chart)

问题

I just want to have one time 2018 and one time 2019 when the data from 2019 begins it actually looks like this:

When I try to put just two labels it just shows two numbers form the entire chart.

What I would like to achieve is, that the labels on my x-axis (the two years) only gets shown two times although I have a lot of data on the chart, so not all the days as is now the case. I do not really have that much experience with the whole web development thing, so any help is appreciated. Thanks in advance.

var config = {
  type: 'line',
  data: {
    labels: ['26.10.2018', '02.11.2018', '09.11.2018', '16.11.2018', '23.11.2018', '30.11.2018', '07.12.2018', '14.12.2018', '21.12.2018', '28.12.2018', '31.12.2018', '01.01.2018', '04.01.2019', '11.01.2019', '18.01.2019', '25.01.2019', '01.02.2019', '08.02.2019', '15.02.2019', '22.02.2019', '01.03.2019'],
    datasets: [{
      label: 'Modell',
      data: [{
          x: '26.10.2018',
          y: -4.43
        }, {
          x: '02.11.2018',
          y: -3.47
        }, {
          x: '09.11.2018',
          y: -3.34
        }, {
          x: '16.11.2018',
          y: -3.62
        }, {
          x: '23.11.2018',
          y: -4.20
        }, {
          x: '30.11.2018',
          y: -3.70
        }, {
          x: '07.12.2018',
          y: -4.04
        }, {
          x: '14.12.2018',
          y: -3.75
        }, {
          x: '21.12.2018',
          y: -4.46
        }, {
          x: '28.12.2018',
          y: -4.50

        }, {
          x: '31.12.2018',
          y: -4.50
        },
        {
          x: '01.01.2018',
          y: -4.50
        }, {
          x: '04.01.2018',
          y: -4.05

        }, {
          x: '11.01.2018',
          y: -3.76
        }, {
          x: '18.01.2018',
          y: -3.64
        }, {
          x: '25.01.2018',
          y: -3.38
        }, {
          x: '01.02.2019',
          y: -3.09
        }, {
          x: '08.02.2019',
          y: -3.24
        }, {
          x: '15.02.2019',
          y: -2.88
        }
      ],
      fill: false,
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'TAM Eurosectors Defensiv'
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: '2018 - 2019'
        }
      }]
    }
  }
};

回答1:

You should use a time xAxis for far more options regarding the time.

  scales: {
    xAxes: [{
      type: 'time',
      time: { 
        unit: 'year'
      }
    }]
  },

You have to import moment.js for more options with calculating and displaying your data. I used it so you can display the labels in the German date format (don't know if you need that, just saw you're from Germany and you use the German date format for your input).

Here's the code for your formatted tooltips:

  tooltips: {
    callbacks: {
      title: function(tooltipItem, data){
        return moment(tooltipItem[0].label).format('DD.MM.YYYY')
      }
    }
  }

Here's all the code in a JSBin

P.S.: You have wrong dates, e.g. '2018-01-01' instead of '2019-01-01' and you don't need extra labels when you put them in you data.

回答2:

As you're plotting a time series you should use the time axis type. To use it you first need to correct your dataset:

Dates must be be provided in an unambiguous format (which means ISO-8601): YYYY-MM-DD.
Your dates must be sorted in chronological order. Your question shows 2018-01 after 2018-10 in both the image and the code, which is clearly a bug.

Once this is done you can simply configure the time axis to display only years, as desired:

options: {
  scales: {
    xAxes: [{
      type: "time",
      time: {
        unit: "year"
      }
    }
  }
}

Below is a fully working example using your dataset (corrected as detailed above). Note that you don't need to provide labels as the time axis automatically calculates the tick labels.

var config = {
  type: 'line',
  data: {
    datasets: [{
      label: 'Modell',
      data: [{
          x: '2018-01-01',
          y: -4.50
        }, {
          x: '2018-01-04',
          y: -4.05

        }, {
          x: '2018-01-11',
          y: -3.76
        },
        {
          x: '2018-01-18',
          y: -3.64
        }, {
          x: '2018-01-25',
          y: -3.38

        }, {
          x: '2018-10-26',
          y: -4.43
        }, {
          x: '2018-11-02',
          y: -3.47

        }, {
          x: '2018-11-09',
          y: -3.34
        },
        {
          x: '2018-11-16',
          y: -3.62
        }, {
          x: '2018-11-23',
          y: -4.20

        }, {
          x: '2018-11-30',
          y: -3.70
        },
        {
          x: '2018-12-07',
          y: -4.04
        }, {
          x: '2018-12-14',
          y: -3.75

        }, {
          x: '2018-12-21',
          y: -4.46
        }, {
          x: '2018-12-28',
          y: -4.50

        }, {
          x: '2018-12-31',
          y: -4.50
        }, {
          x: '2019-02-01',
          y: -3.09
        },
        {
          x: '2019-02-08',
          y: -3.24
        }, {
          x: '2019-02-15',
          y: -2.88
        }
      ],
      fill: false
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'TAM Eurosectors Defensiv'
    },
    scales: {
      xAxes: [{
        type: "time",
        time: {
          unit: "year"
        },
        scaleLabel: {
          display: true,
          labelString: '2018 - 2019'
        }
      }]
    }
  }
};

new Chart(document.getElementById("chart"), config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>

来源：https://stackoverflow.com/questions/58554513/how-can-i-show-only-2-numbers-on-the-xaxe-in-chartjs-having-more-than-two-number

标签

javascript

charts

chart.js