JS 图表：不要合并重复的 x 轴标签

Question

我正在尝试使用 JSCharting 显示样条面积图（但该方法对我来说并不重要，任何工作解决方案都可以），使用字母作为 X 轴标签（我使用蛋白质的氨基酸，这就是为什么字母）。
所以我想显示每个字母的所有值，即使有重复项。
例如：

{x: "V", y: 0.72}
{x: "A", y: 0.59}
{x: "F", y: 0.59}
{x: "T", y: 0.65}
{x: "E", y: 0.59}
{x: "K", y: 0.63}
{x: "Q", y: 0.67}
{x: "D", y: 0.6}
{x: "A", y: 0.58}
{x: "L", y: 0.7}
{x: "V", y: 0.77}
{x: "S", y: 0.54}
{x: "S", y: 0.53}
{x: "S", y: 0.67}
{x: "F", y: 0.69}
{x: "E", y: 0.54}
{x: "A", y: 0.5}
{x: "F", y: 0.52}
{x: "K", y: 0.71}
{x: "A", y: 0.84}
{x: "N", y: 0.89}
{x: "I", y: 0.91}

显示：

一团糟，毫无意义。
我想要的是单独和按顺序查看所有点，因为这是有意义的，而不是合并。应显示所有 X 轴标签。
我该怎么做？

Answer 1

此类数据通常以 散点 图表呈现。但是我相信数据点的

x

和

y

值需要是数字格式。因此，在您的图表中使用它之前，您需要先处理您的

data

。

然后你必须定义一个

xAxes.ticks.callback

函数和一个

tooltips.callbacks.label

函数才能渲染原始数据

请查看下面的可运行代码片段。

const data = [
  {x: "V", y: 0.72},
  {x: "A", y: 0.59},
  {x: "F", y: 0.59},
  {x: "T", y: 0.65},
  {x: "E", y: 0.59},
  {x: "K", y: 0.63},
  {x: "Q", y: 0.67},
  {x: "D", y: 0.6},
  {x: "A", y: 0.58},
  {x: "L", y: 0.7},
  {x: "V", y: 0.77},
  {x: "S", y: 0.54},
  {x: "S", y: 0.53},
  {x: "S", y: 0.67},
  {x: "F", y: 0.69},
  {x: "E", y: 0.54},
  {x: "A", y: 0.5},
  {x: "F", y: 0.52},
  {x: "K", y: 0.71},
  {x: "A", y: 0.84},
  {x: "N", y: 0.89},
  {x: "I", y: 0.91}
];
const xLabels = data.reduce((acc, v) => acc.includes(v.x) ? acc : acc.concat(v.x), []).sort();

new Chart('myChart', {
  type: 'scatter',
  data: {
    datasets: [{
      label: 'My Dataset',
      borderColor: 'green',
      backgroundColor: 'lightblue',
      data: data.map(o => ({ x: xLabels.indexOf(o.x), y: o.y }))
    }]
  },
  options: {
    responsive: true,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        offset: true,
        ticks: {          
          stepSize: 1,
          callback: v => xLabels[v]
        }
      }]
    },
    tooltips: {
      callbacks: {
        label: (tooltipItem, data) => xLabels[tooltipItem.xLabel] + ': ' + tooltipItem.value
      }
    }  
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

Answer 2

我意识到问题发布已经很长时间了，同时 chart.js 发生了很多变化，但这是我被谷歌发送到的帖子，同时也有同样的问题。

因此，对于 chart.js 4.1.2，消除合并的重复标签的解决方案是显式设置数据的

labels

属性。我想这就是大多数人从一开始就完成的方式。尽管如此，如果您不设置

data.labels

，而是从数据集中获取标签（作为

x

属性或通过

parsing.xAxisKey

）选项，您将获得合并功能。

没有合并的OP案例（fiddle）

const data = [
    {x: "V", y: 0.72},
    {x: "A", y: 0.59},
    {x: "F", y: 0.59},
    {x: "T", y: 0.65},
    {x: "E", y: 0.59},
    {x: "K", y: 0.63},
    {x: "Q", y: 0.67},
    {x: "D", y: 0.6},
    {x: "A", y: 0.58},
    {x: "L", y: 0.7},
    {x: "V", y: 0.77},
    {x: "S", y: 0.54},
    {x: "S", y: 0.53},
    {x: "S", y: 0.67},
    {x: "F", y: 0.69},
    {x: "E", y: 0.54},
    {x: "A", y: 0.5},
    {x: "F", y: 0.52},
    {x: "K", y: 0.71},
    {x: "A", y: 0.84},
    {x: "N", y: 0.89},
    {x: "I", y: 0.91}
];

const config = {
    type: 'line',
    
    data: {
        labels: data.map(o=>o.x),
        datasets:[{
            data: data.map(o=>o.y)
        }]
    },
    
    options: {
        fill: true,
        plugins:{
            legend:{
                display: false
            }
        }
    }
};

new Chart(document.querySelector('#line-chart'), config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"
        integrity="sha512-t41WshQCxr9T3SWH3DBZoDnAT9gfVLtQS+NKO60fdAwScoB37rXtdxT/oKe986G0BFnP4mtGzXxuYpHrMoMJLA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<div id="line-chart-container" style="height:300px">
<canvas id="line-chart"></canvas>
</div>

如果只是你一直这样做并且想知道合并是否仍在发生，是的 - 只需删除

data.labels

并设置

data.datasets:[{data}]

- 参见 the fiddle。这实际上是一个非常有用和自然的特征，如果相同的标签是连续的——它只是垂直堆叠对应于相同

y

的不同

x

值，而不是水平展开它们。尽管如此，如果有（或何时会有）一个简单的选项来禁用此功能，这是让我们知道的好地方。