Question

感谢您抽出宝贵时间。

我想这样做，你可以在图片中看到。

我有数组中标签的值和其他数组中 yAxes 的值。标签显示一小时的 59 分钟，我只想显示分钟（05、10、15、20 .....等）我只能将这个时间值推入数组，但是当我将“时间”放入chartjs 的标签中时，图表仅在 yAxes 中显示 12 个值，我想在 yAxes 中显示 59 个值，并且只显示这个 xAxes。 ..

如果我这样做：

  import { Fragment } from "react";
  import { Line } from "react-chartjs-2";
 import "./GraficosDemo.css";

const GraficosDemo = ({ datosMeteoGraf, rotuloGrafico }) => {
var colors = [
"#007bff",
"#0097fc",
"#333333",
"#c3e6cb",
"#dc3545",
"#ed872d",
];
if (!datosMeteoGraf) return null;

const dataSetTWS = [];
const dataSetTWS_GUST = [];
const minutos = [];

 //GRAFICO DE INTENSIDAD DE VIENTO
  for (let i = 0; i < datosMeteoGraf.length; i++) {    
    dataSetTWS.push(datosMeteoGraf.TWS[i]);    
     }

 //GRAFICO DE INTENSIDAD DE RACHAS DE VIENTO
   for (let i = 0; i < datosMeteoGraf.length; i++) {    
     dataSetTWS_GUST.push(datosMeteoGraf.TWS_GUST[i]);  
   }
    // console.log(dataSetTWS_GUST);

    for (let i = 0; i < datosMeteoGraf.length; i++) {         
     if((new Date (datosMeteoGraf.TIME[i]).getMinutes()) % 5 === 0){
  minutos.push(new Date(datosMeteoGraf.TIME[i]).toTimeString().slice(0, 5))
   }        
   }


  return (
    <Fragment>
      <Line
        data={{
       labels: minutos,
      datasets:[
        {
          borderWidth: 0,
          label: "Intensidad Última Hora",
          data: dataSetTWS,
          backgroundColor: "transparent",
          borderColor: colors[1],
          pointStyle: "dash",
        },          
        {
          borderWidth: 0,
          label: "Intensidad Rachas de Viento",
          data: dataSetTWS_GUST,
          backgroundColor: "transparent",
          borderColor: colors[4],
          pointStyle: "dash",
        },
      ],
    }}
    height={250}
    options={{
      maintainAspectRatio: false,
      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true,
              stepSize: 1,
            },
          },
        ],
        xAxes: [
          {
            display:true,
          }
        ]
      },
    }}
  />

  
</Fragment>
  );
 };

export default GraficosDemo;

我有这个：

push in time array only the minutes multiples of 5

但我想保留我所有的值并只显示这个标签。就像顶部的图片。

有人可以帮我吗？谢谢

Answer 1

ChartJS 不需要 需要标签来映射值。做你正在做的事情的好方法是实现一个时间轴。这将允许您添加任何时间范围，而无需添加到标签列表中。您还需要一个时间解析器。 here is a list.

配置：

const config = {
  type: 'line',
  data: data,
  options: { 
      scales: {
          xAxis: {
                type: 'time',
                
                ticks: {
                    source: 'labels', // get ticks from given labels
                },

                time: {
                    minUnit: 'minute', // smallest time format

                    displayFormats: {
                        minute: "HH:mm",
                        hour: "dd/MM HH:mm",
                        day: "dd/MM",
                        week: "dd/MM",
                        month: "MMMM yyyy",
                        quarter: 'MMMM yyyy',
                        year: "yyyy",
                    }
                }
            },
        },
    }
};

数据：

var data = {
  labels: labels,
  datasets: [{
    label: 'My First Dataset',
    data: generateTestSeries(),
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
};

标签：

var labels = [
  new Date(2021, 10, 15, 15, 0),
  new Date(2021, 10, 15, 15, 5),
  new Date(2021, 10, 15, 15, 10),
  new Date(2021, 10, 15, 15, 15),
  new Date(2021, 10, 15, 15, 20),
  new Date(2021, 10, 15, 15, 25),
  new Date(2021, 10, 15, 15, 30),
  new Date(2021, 10, 15, 15, 35),
  new Date(2021, 10, 15, 15, 40),
  new Date(2021, 10, 15, 15, 45),
  new Date(2021, 10, 15, 15, 50),
  new Date(2021, 10, 15, 15, 55),
  new Date(2021, 10, 15, 16, 0),
];

测试数据：

function generateTestSeries () { // create test data
    let series = [];
    var val = 0;

    let start = new Date(2021, 10, 15, 15);
    let end = new Date(2021, 10, 15, 16);

    while (start < end) {
        val += Math.floor(Math.random() * 11) - 5;

        series.push({
            "x": start, 
            "y": val, 
        });

        start = new Date(start.getTime() + 60000);
    }
    
    return series;
}

这看起来像：

至于我之前关于标签的观点，您可以删除它们，它会根据您的数据生成一些。它看起来像这样：

如果没问题，您可以删除 labels: labels,

并将 source: 'labels', 更改为 source: 'auto',

有关时间轴的更多信息：Time Cartesian Axis

Answer 2

Chart.js 需要标签来映射值，因此您需要提供标签，尽管您可以使用刻度回调来隐藏一些标签，如下所示：

var options = {
  type: 'line',
  data: {
    labels: ["0", "5", "10", "15", "20", "25"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      xAxes: [{
        ticks: {
          callback: (tick) => (Number(tick) % 10 === 0 ? tick : null) // Replace null with "" to show gridline
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

在 chart.js 中显示比标签更多的数据集

2 个答案: