Javascript 如何在chart.js中将对数刻度指定给y轴？ var数据1={ 标签：JSON.parse（“”）， 数据集：[{ 填充颜色：“rgba（220220,0.5）”， strokeColor:“rgba（2201）”， 点颜色：“rgba（220220,1）”， pointStrokeColor:“fff”， 数据：1000， 900, 90, 200, 1020 }, { 填充颜色：“rgba（151187205,0.5）”， strokeColor:“rgba（151187205,1）”， 点颜色：“rgba（151187205,1）”， pointStrokeColor:“fff”， 数据：600， 456, 20, 2. 900 ] }; 变量opt1={ 拉票边界宽度：3， 画布边框颜色：“205081”， scaleOverride：对， 比例：6， 缩放宽度：log2， scaleStartValue:0， scaleLabel:“”， 传说：没错， 英格拉赫：是的， 注释显示：正确， Ingraphhow：错误， 注释显示：正确， 动画化：“easeOutBounce”， 笔画字体大小：18 }; var myBarChart1=新图表（ctx1）.Bar（数据1，opt1）；

对数标度

对数刻度用于绘制数字数据。它可以放置在 在x轴或y轴上。顾名思义，对数 插值用于确定值在轴上的位置

---

可以将对数比例指定给y轴，如下所示：

var data1 = {
        labels: JSON.parse('<?php echo JSON_encode($bioc_months);?>'),
        datasets: [{
                fillColor: "rgba(220,220,220,0.5)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                data: 1000,
                900,
                90,
                200,
                1020
            }, {
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                data: 600,
                456,
                20,
                2,
                900
            ]
        };

        var opt1 = {
            canvasBordersWidth: 3,
            canvasBordersColor: "#205081",
            scaleOverride: true,
            scaleSteps: 6,
            scaleStepWidth: log2,
            scaleStartValue: 0,
            scaleLabel: "<%=value%>",
            legend: true,
            inGraphDataShow: true,
            annotateDisplay: true,
            inGraphDataShow: false,
            annotateDisplay: true,
            animationEasing: "easeOutBounce",
            graphTitleFontSize: 18
        };

        var myBarChart1 = new Chart(ctx1).Bar(data1, opt1);

---

正如@user2722127所指出的，本质是将类型设置为“对数”

如果你只注意这一点，那么你最终会得到科学格式的笨拙标签（例如200000=“2e5”）。我个人更喜欢它们更人性化一点。 因此，回调方法实际上将

数值

数据值转换为

字符串

标签值

注意：不会为数据集中的所有值调用回调。只会为自动生成的刻度调用回调。在我的情况下，这就足够了。不过，可能有太多的标签。因此，为了限制标签的数量，我只需为所有不需要的标签值返回

null

注意：上面的屏幕截图显示了一个刻度为0的图表。这实际上是不正确的。正如您在上面的源代码中所看到的，我后来将最小值修改为1。我不得不这样做，因为在稍后的chart.js版本中，图表实际上被严重弄乱了，有时会在图表下面绘制。这都是由于0-ti实际上，从数学的角度来看，对数刻度不可能有0刻度。因此，从1或0.001开始更合理，例如。但不是0

编辑： 以下不是严格必要的，但可能会提高性能

如果您想对创建的刻度进行更多控制，可以提供

afterBuildTicks

属性（这与@user2722127的答案非常相似）。在本例中，它只是用不同的刻度替换图表对象的刻度数组的内容

yAxes: [{
    type: 'logarithmic',
    ticks: {
         min: 1,
         max: 1000000,
         callback: function (value, index, values) {
             if (value === 1000000) return "1M";
             if (value === 100000) return "100K";
             if (value === 10000) return "10K";
             if (value === 1000) return "1K";
             if (value === 100) return "100";
             if (value === 10) return "10";
             if (value === 1) return "1";
             return null;
         }
    }
}]

您只需将此函数与其他属性一起作为属性添加到

yAxis

元素中

  afterBuildTicks = (chartObj) => {
      const ticks = [1, 10, 100, 1000, 10000, 100000, 1000000];
      chartObj.ticks.splice(0, chartObj.ticks.length);
      chartObj.ticks.push(...ticks);
  }

---

非常暴力的“问题”，这只是一个代码。你应该考虑增加更多的信息而不是仅仅在这里推代码。我认为你的回调方法是错误的。参数<代码>值<代码>是数字的，它应该返回一个<代码>字符串< /代码>。这基本上允许你重命名诸如<代码> 1000000 < /C> >值> <代码> 1M。。如果不需要该值的标签，也可以只返回

null

。

afterBuildTicks

与我测试的内容相比是多余的。（我不确定它是否有效，因为我也无法在文档中检索它）.话虽如此，如果没有它，它也可以正常工作，您的其余答案对我帮助很大。无论如何，如果您不想要像

“2e5”这样的标签，回调方法是至关重要的

为了表示像

200000

这样的值，我只想说，我最终使用afterBuildTicks根据不断变化的数据集动态生成所需范围的日志值。我使用ticks回调使数字成为toLocaleString（）“d，为10的大倍数添加逗号以使其可读。因此，它不是多余的。您的示例回调是否希望这些值包含在数据集中？如果不是，很可能会经常返回null。@bvj答案中已经有了，但可能不够清楚。回调不是为数据集的值调用的，而是为轴的“刻度”。如果要预筛选或只设置自己的刻度，可以在yAxis上提供一个附加的

afterBuildTicks

函数。@bvj我添加了一个示例。来自未来的消息：我正在迁移到highcharts：代码越少，功能越多，使用angular时效果越好。

  afterBuildTicks = (chartObj) => {
      const ticks = [1, 10, 100, 1000, 10000, 100000, 1000000];
      chartObj.ticks.splice(0, chartObj.ticks.length);
      chartObj.ticks.push(...ticks);
  }

yAxes: [{
    type,
    ticks,
    afterBuildTicks
}]