代码之家 › 专栏 › 技术社区 › AJ-

在X轴上有数据时,如何在X轴上显示固定标签?

angular6 chart.js charts angular javascript

AJ- · 技术社区 · 6 年前

我刚开始使用Chart.js,我有一个问题。

这是我当前的图表,在 Y-axis 我有可能的成绩(学生的考试),从 1 to 6

上 X-axis

现在它变得更复杂了,这个图表正在根据输入和下拉列表的选择进行更新。

坡度(Y轴)可以有5种增量类型: Integer, Halves, Quarters, Decimal and Hundredths

Quarters ,意思是 住处 为等级选择的数字数组如下所示:

grades = [1, 1.25, 1.50, 1.75, 2....., 5.75, 6]

Hundredths 选择后,它将显示为:

grades = [1, 1.01, 1.02, 1.03, .... 5.97, 5.98, 5.99, 6]

所需的点是用我在函数中输入的公式计算的:

mySecretFormula(grades: Array<Number>) {
    grades.forEach(g => {
    const currentPoints = g * mySecretFormula;

    this.points.push(currentPoints);
}

所以基本上我在这个函数中传递我的分数,它返回另一个具有相同元素数的数字数组(因为每个分数对应一个分数)

例如,如果我选择了整数等级,意味着我的等级数组如下所示:

grades = [1, 2, 3, 4, 5, 6]

我得到的回报是:

scores = [0, 5, 10, 15, 25, 30]

如果最大分数设置为30(最大分数在输入中定义)

最后我用 chart.js

this.canvas.data.labels = this.points;
this.canvas.data.datasets[0].data = this.grades;
this.canvas.update();

所以每次我改变关于等级增量的下拉列表时,这个函数就会被激发并更新图表。

我想要达到的目标很简单。

这是我选择整数分数时图表的样子,所以只有6个不同的分数和6个不同的分数。

所以总是有5或6条网格线,X轴总是有相同的记号点。

如果当前选择的增量是整数,我将只有6个交集,但是如果我要换成十进制或百分之一,那么对于很多交集,图表看起来就像这样,但是当你用鼠标悬停在直线上时,我将得到每个有效交集的工具提示。

现在如果我换成十进制增量,我的图表会更新为:

但是交点工作正常,如果我将鼠标悬停在直线上,我将得到这些对的每个点的工具提示:

十进制增量等于:

点=[0,0.7,1.4,2.1,2.8。。。。34.3, 35]

所以要达到同样的结果,但是图表总是一样的,总是一样的记号点,高度和宽度,因为等级和分数的范围总是一样的,但是取决于所选择的增量,可能会有至少6个交叉点(整数)到超过500个交叉点(百分之一)!

编辑:在您的帮助下,在两行上添加自定义工具提示,如下所示:

afterBody: function([tooltipItem], data): any {
                            const multistringText = ["Points: " + tooltipItem.xLabel];
                            multistringText.push("Grade: " + tooltipItem.yLabel);

                            return multistringText;
                        }

很好地工作,但我现在如何删除它上面的原始工具提示字符串?看图片,上面我的2行自定义工具提示我有另一行,我想隐藏!

1 回复 | 直到 6 年前

barbsan Cibi 6 年前

我建议将图表转换为xy图表,设置轴选项和自定义工具提示

var ctx = document.getElementById("myChart").getContext('2d');
var precision = 0;
var data = getData();

var myChart = new Chart(ctx, {
  type:"scatter",
    data: {
        datasets: [{
            label: 'grades',
            data: data,
            fill: false,
            pointRadius: 0,
            pointHitRadius: 3
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true,
                    max:6
                }
            }],
            xAxes: [{
                ticks: {
                    beginAtZero:true,
                    max:35,
                    stepSize: 1,
                    callback: function(value){
                      if (value < 5){
                        return value;
                      } else {
                        if (value% 5 === 0){
                          return value;
                        }
                      }
                    }
                }
            }]
        },
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = [
                    'X: ' + tooltipItem.xLabel.toFixed(precision),
                    'Y: ' + tooltipItem.yLabel.toFixed(precision)
                    ];
                    return label;
                }
            }
        }
    }
});

function getData(){
  var step = 10**-precision;
  var arr = [];
  for (var i=0; i<=6; i+=step){
    arr.push({y: i, x: 35*i/6})
  }
  return arr;
}

setTimeout(function(){
    precision = 1;
    myChart.data.datasets[0].data = getData();
    myChart.update();

}, 2000)

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