JS图表:请勿合并重复的x轴标签 [英] JS Chart: do not merge duplicate x axis labels

问题描述

我正在尝试使用JSCharting显示样条曲线面积图(但是该方法对我而言并不重要，任何可行的解决方案都可以)，并使用字母作为X轴标签(我使用蛋白质的氨基酸，这是为什么写字母).
所以我想显示每个字母的所有值，即使有重复也是如此.
例如:

I am trying to display a spline area chart using JSCharting (but the method is not important for me, any working solution is ok), with alphabetical letters as X Axis labels (I work with amino acids of proteins, this is the reason why letters).
So I want to show all values for each letter, even if there are duplicates.
For exemple:

{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轴标签都应显示.
我该怎么办?

It is a mess and makes no sense.
What I want is to see all points individually and sequentially because this is how it makes sense, not merged. All of the X axis labels should be displayed.
How can I do that ?

推荐答案

此类数据通常在散点图图表.但是，我认为数据点的 x 和 y 值必须为数字格式.因此，您需要先处理数据，然后才能在图表中使用它.

Such data is typically rendered in a scatter chart. I believe however that x and y values of your data points need to be of number format. Therefore you need to process your data prior to use it in your chart.

然后，您必须定义 <代码> xAxes.ticks.callback 函数和

Then you must define a xAxes.ticks.callback function and a tooltips.callbacks.label function in order to render the original data.

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

Please have a look at the runnable code snippet below.

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>

这篇关于JS图表:请勿合并重复的x轴标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！