Chart.js ChartJS-如何跳过X轴上的特定分钟

我正在使用ChartJS可视化数据库（我已将其转换为数组）

问题是我在每一点之间都有不同的时差。

我的问题是，如何根据两个数据样本之间的时间差在X轴上添加空间？谢谢

编辑：我不太清楚我想通过我的问题实现什么，让我澄清一下：

我目前有以下代码：

  var worldctx = document.getElementById('worldChart').getContext('2d');
  var worldChart = new Chart(worldctx, {
    type: 'line',
    data: {
      labels: worldArrayTime,
      datasets: [{ 
          data: worldArrayData,
          label: "WORLD",
          borderColor: "#3e95ce",
          backgroundColor: "#3e95ce",
          fill: false
        }
      ]
    },
    options: {
      responsive: true,
      title: {
        display: true,
        text: 'Taric Ranking'
      },
      scales:{
        xAxes:[{
          ticks:{
            callback: function(dataLabel,index){
              let a = Math.floor(worldArrayData.length/10)
              return index % a == 0 ? dataLabel : '';
            }
          }
        }],
        yAxes:[{
          ticks:{
            min: Math.floor(Math.min.apply(Math,worldArrayData)-2),
            max: Math.floor(Math.max.apply(Math,worldArrayData)+2)
          }
        }]
      }
    }
  });
}

它给了我这个图表，但是X轴与每个点之间花费的时间不匹配，我如何使它准确地表示X轴上的时间？

---

我决定使用Chartist.js，因为它提供了一个更简单的moment.js实现

---

如果你知道如何回答这个问题，我仍然对这个问题感兴趣。

我决定使用Chartist.js，因为它提供了一个更简单的moment.js实现

---

如果您知道如何回答这个问题，我仍然感兴趣。

您应该将

xAxis

定义为一个。您还可以根据Chart.js文档使用属性

displayFormats

。有关允许的格式字符串，请参阅

为此，请将以下内容添加到图表

选项中的
xAxis

xAxes: [{
  type: 'time',
  time: {
    displayFormats: {
      minute: 'DD/MM hh:mm'
    }
  }, 
  ...

请注意，Chart.js使用Moment.js作为
时间轴。因此，您应该使用Chart.js的名称，在单个文件中包含Moment.js


constworldarray=[{time:1583593111036，秩：665}，{time:15835934390，秩：665}，{time:158359363697，秩：665}，{time:1583594921644，秩：666}，{time:15835950555581，秩：665}，{time:158359454573，秩：665}，{time:15835966247042，秩：665}，{time:158359595959586437，秩：66747，秩}，{时间：158360146665，排名：668}，{时间：158360660570，排名：665}，{时间：1583604281776，排名：668}，{时间：1583605854175，排名：669}，{时间：158360447275，排名：668}，{时间：1583607161055，排名：667}，{时间：1583607882093，排名：666}，{时间：1583608179707，排名：667}，{时间：158360977}，{时间：1583609860652，排名：669}，{时间：1583618775，排名：670}，{时间：158361344874，排名：671}，{时间：158363459587，排名：672}]；
const worldaraytime=worldArray.map（o=>o.time）；
const worldaraydata=worldArray.map（o=>o.rank）；
var worldctx=document.getElementById（'worldChart'）.getContext（'2d'）；
var worldChart=新图表（worldctx{
键入：“行”，
数据：{
标签：worldArrayTime，
数据集：[{
数据来源：worldArrayData，
标签：“世界”，
边框颜色：“3e95ce”，
背景色：“3e95ce”，
填充：假
}]
},
选项：{
回答：是的，
标题：{
显示：对，
文字：“Taric排名”
},
比例：{
xAxes：[{
键入：“时间”，
时间：{
工具提示格式：“DD/MM hh:MM”，
显示格式：{
分钟：'DD/MM hh:MM'
}
},         
滴答声：{
maxTicksLimit:worldArrayData.length
}
}],
雅克斯：[{
滴答声：{
min:Math.floor（Math.min.apply（Math，worldArrayData）-2），
max:Math.floor（Math.max.apply（Math，worldArrayData）+2）
}
}]
}
}
})；
您应该将
xAxis
定义为。您还可以根据from Chart.js文档使用属性
displayFormats
。有关允许的格式字符串，请参阅

为此，请将以下内容添加到图表
选项中的
xAxis

xAxes: [{
  type: 'time',
  time: {
    displayFormats: {
      minute: 'DD/MM hh:mm'
    }
  }, 
  ...

请注意，Chart.js使用Moment.js作为
因此，您应该使用Chart.js的格式，在单个文件中包含Moment.js


constworldarray=[{time:1583593111036，秩：665}，{time:15835934390，秩：665}，{time:158359363697，秩：665}，{time:1583594921644，秩：666}，{time:15835950555581，秩：665}，{time:158359454573，秩：665}，{time:15835966247042，秩：665}，{time:158359595959586437，秩：66747，秩}，{时间：158360146665，排名：668}，{时间：158360660570，排名：665}，{时间：1583604281776，排名：668}，{时间：1583605854175，排名：669}，{时间：158360447275，排名：668}，{时间：1583607161055，排名：667}，{时间：1583607882093，排名：666}，{时间：1583608179707，排名：667}，{时间：158360977}，{时间：1583609860652，排名：669}，{时间：1583618775，排名：670}，{时间：158361344874，排名：671}，{时间：158363459587，排名：672}]；
const worldaraytime=worldArray.map（o=>o.time）；
const worldaraydata=worldArray.map（o=>o.rank）；
var worldctx=document.getElementById（'worldChart'）.getContext（'2d'）；
var worldChart=新图表（worldctx{
键入：“行”，
数据：{
标签：worldArrayTime，
数据集：[{
数据来源：worldArrayData，
标签：“世界”，
边框颜色：“3e95ce”，
背景色：“3e95ce”，
填充：假
}]
},
选项：{
回答：是的，
标题：{
显示：对，
文字：“Taric排名”
},
比例：{
xAxes：[{
键入：“时间”，
时间：{
工具提示格式：“DD/MM hh:MM”，
显示格式：{
分钟：'DD/MM hh:MM'
}
},         
滴答声：{
maxTicksLimit:worldArrayData.length
}
}],
雅克斯：[{
滴答声：{
min:Math.floor（Math.min.apply（Math，worldArrayData）-2），
max:Math.floor（Math.max.apply（Math，worldArrayData）+2）
}
}]
}
}
})；

Hi。请添加您想要的“理想”图表的屏幕截图（目前很难理解您的问题）。此外，下次向她粘贴代码（谷歌“降价代码”），而不是带有代码屏幕截图的jpeg。尝试以下操作：Hi。请添加您想要的“理想”图表的屏幕截图（目前很难理解您的问题）。此外，下次粘贴h