ChartJS：如何在图表上显示两个 "y axis" 刻度

Question

我有一个显示各种数据点的图表。这些数据点中有些是高数字，有些是低数字。

低数字（访问）我可以缩放到不同的比例，这个新的比例可以放在“X”轴上（它是“Y”轴然后旋转 90 度）。但问题是：

网格在移除后仍然存在

如何在不调整鼠标悬停时的标签数据的情况下推断图表上的位置？2 我搜索了 Whosebug 和 ChartJS 文档，但看不到如何做到这一点。

我试图使用“其他”轴（在本例中是图表顶部的水平条），这样比例就会是相对的，不需要原始数据编辑，但我做不到工作，找不到关于此的文档。我确定这是可能的，但我看不出在哪里。

我找到了但这只与 ChartJS V2 相关。

当前使用的版本是 ChartJS 3.2.1

原版：

    var ctx = document.getElementById("historicChart");
    var historicChart = new Chart(ctx, {
            type: "horizontalBar",
            data: {
                labels: [2022,2021,2020,2019,2018,2017,2016],
                datasets: [
                    {
                        type: 'line',
                        label: 'Visits',
                        data: ["1","7","493","163","467","88","48"],
                        backgroundColor: '#FFC900',
                        pointBackgroundColor: '#FFC900',
                        pointRadius: 8,
                        pointStyle: 'circle',
                        showLine: false,
                        order: 1,
                        hoverRadius: 10
                    },
                    {
                        type: 'bar',
                        label: 'Applied',
                        data: ["486","800","704","1084","532","618","543"],
                        backgroundColor: '#436BFF',
                        borderWidth: 0,
                        order: 2,
                        barPercentage: 0.9,
                        stack: 'stack 0',
                    },
                    {
                        type: 'bar',
                        label: 'Accepted',
                        data: ["1","147","290","521","233","306","271"],
                        backgroundColor: '#C40500',
                        borderWidth: 0,
                        barPercentage: 0.9,
                        stack: 'stack 1',
                        order: 4
                    },
                    {
                        type: 'bar',
                        label: 'Declined',
                        data: ["616","4273","3998","3400","922","1225","1184"],
                        /*backgroundColor: '#03570c', /* emerald */
                        backgroundColor: '#006545', /* jade */
                        borderWidth: 0,
                        barPercentage: 0.9,
                        stack: 'stack 0',
                        order: 5
                    },
                    {
                        type: 'bar',
                        label: 'Processing',
                        data: ["6","13","22","1","34","2","1"],
                        backgroundColor: '#65ccD3', /* aqua + blue */
                        borderWidth: 0,
                        barPercentage: 0.9,
                        stack: 'stack 0',
                        order: 3
                    },
                ]
            },
            options: {
                responsive: true,
                interaction: {
                    intersect: false,
                    mode: 'index',
                    axis: 'y'
                },
                indexAxis: 'y',
                scales: {
                    xAxes: [{
                        stacked: true,
                        ticks: {
                            stepSize: 1
                        },
                        beginAtZero: true
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                }
            }
        }
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

   <canvas id="historicChart"></canvas>

更新：

我已尝试根据 this example from the CHartJS documentation 添加自定义辅助轴，但它并不完全符合我的需要；网格线保留并且轴刻度位于“错误”一侧（一个尺寸（底部）有两个刻度，另一侧（顶部）有零刻度

var ctx = document.getElementById("historicChart");
    var historicChart = new Chart(ctx, {
            type: "horizontalBar",
            data: {
                labels: [2022,2021,2020,2019,2018,2017,2016],
                datasets: [
                    {
                        type: 'line',
                        label: 'Visits',
                        data: ["1","7","493","163","467","88","48"],
                        backgroundColor: '#FFC900',
                        pointBackgroundColor: '#FFC900',
                        pointRadius: 8,
                        pointStyle: 'circle',
                        showLine: false,
                        order: 1,
                        hoverRadius: 10,
                        xAxisID:'xTwo'
                    },
                    {
                        type: 'bar',
                        label: 'Applied',
                        data: ["486","900","724","1084","532","618","543"],
                        backgroundColor: '#436BFF',
                        borderWidth: 0,
                        order: 2,
                        barPercentage: 0.9,
                        stack: 'stack 0',
                    },
                    {
                        type: 'bar',
                        label: 'Accepted',
                        data: ["1","147","290","511","253","306","271"],
                        backgroundColor: '#C40500',
                        borderWidth: 0,
                        barPercentage: 0.9,
                        stack: 'stack 1',
                        order: 4
                    },
                    {
                        type: 'bar',
                        label: 'Declined',
                        data: ["616","4373","3998","3400","922","1205","1184"],
                        /*backgroundColor: '#03570c', /* emerald */
                        backgroundColor: '#006545', /* jade */
                        borderWidth: 0,
                        barPercentage: 0.9,
                        stack: 'stack 0',
                        order: 5
                    },
                    {
                        type: 'bar',
                        label: 'Processing',
                        data: ["6","23","22","1","4","2","1"],
                        backgroundColor: '#65ccD3', /* aqua + blue */
                        borderWidth: 0,
                        barPercentage: 0.9,
                        stack: 'stack 0',
                        order: 3
                    },
                ]
            },
            options: {
                responsive: true,
                interaction: {
                    intersect: false,
                    mode: 'index',
                    axis: 'y'
                },
                indexAxis: 'y',
                scales: {
                    xAxes: [{
                        stacked: true,
                        ticks: {
                            stepSize: 1
                        },
                        beginAtZero: true
                    }],
                    yAxes: [{
                        stacked: true
                    }],
                    xTwo: [{
                        type: 'linear',
                        display: true,
                        position: 'top',
                        grid: {
                            display: false,
                            drawOnChartArea: false,
                            ticks: {
                                display: false
                            }
                        }
                    }]
                }
            }
        }
    );

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

       <canvas id="historicChart"></canvas>

问题似乎与秤有关； "xTwo";

     xTwo: [{
           type: 'linear',
           display: true,
           position: 'top',
           grid: {
                 display: false,
                 drawOnChartArea: false,
                 ticks: {
                 /* trying to even just hide the ticks here fails */
                         display: false,
                 }
           }
     }]

如何解决此问题以隐藏网格线并将比例尺放在图表的正确一侧？

Answer 1

您可以在工具提示配置中为此使用自定义标签回调，而且您的比例配置是错误的。它是 V2 风格。对于所有更改，请阅读 migration guide

var ctx = document.getElementById("historicChart");
var historicChart = new Chart(ctx, {
  type: "horizontalBar",
  data: {
    labels: [2022, 2021, 2020, 2019, 2018, 2017, 2016],
    datasets: [{
        type: 'line',
        label: 'Visits',
        data: ["5", "35", "2465", "815", "2335", "440", "240"],
        backgroundColor: '#FFC900',
        pointBackgroundColor: '#FFC900',
        pointRadius: 8,
        pointStyle: 'circle',
        showLine: false,
        order: 1,
        hoverRadius: 10
      },
      {
        type: 'bar',
        label: 'Applied',
        data: ["486", "800", "704", "1084", "532", "618", "543"],
        backgroundColor: '#436BFF',
        borderWidth: 0,
        order: 2,
        barPercentage: 0.9,
        stack: 'stack 0',
      },
      {
        type: 'bar',
        label: 'Accepted',
        data: ["1", "147", "290", "521", "233", "306", "271"],
        backgroundColor: '#C40500',
        borderWidth: 0,
        barPercentage: 0.9,
        stack: 'stack 1',
        order: 4
      },
      {
        type: 'bar',
        label: 'Declined',
        data: ["616", "4273", "3998", "3400", "922", "1225", "1184"],
        /*backgroundColor: '#03570c', /* emerald */
        backgroundColor: '#006545',
        /* jade */
        borderWidth: 0,
        barPercentage: 0.9,
        stack: 'stack 0',
        order: 5
      },
      {
        type: 'bar',
        label: 'Processing',
        data: ["6", "13", "22", "1", "34", "2", "1"],
        backgroundColor: '#65ccD3',
        /* aqua + blue */
        borderWidth: 0,
        barPercentage: 0.9,
        stack: 'stack 0',
        order: 3
      },
    ]
  },
  options: {
    responsive: true,
    interaction: {
      intersect: false,
      mode: 'index',
      axis: 'y'
    },
    indexAxis: 'y',
    plugins: {
      tooltip: {
        callbacks: {
          label: (ttItem) => {
            const label = ttItem.dataset.label;
            const val = Number(ttItem.raw);

            let res = `${label}: ${label === 'Visits' ? val / 5 : val}`;
            return res
          }
        }
      }
    },
    scales: {
      x: {
        stacked: true,
        ticks: {
          stepSize: 1
        },
        beginAtZero: true
      },
      y: {
        stacked: true
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<canvas id="historicChart"></canvas>

更新：
您尝试添加第二个比例尺，在 chart.js V3 中，所有比例尺都是它们自己的对象，不再是数组，所有更改请参见上面链接的迁移指南。将比例更改为对象可以解决更新方法中的问题，而无需乘以值：

var ctx = document.getElementById("historicChart");
var historicChart = new Chart(ctx, {
  type: "horizontalBar",
  data: {
    labels: [2022, 2021, 2020, 2019, 2018, 2017, 2016],
    datasets: [{
        type: 'line',
        label: 'Visits',
        data: ["1", "7", "493", "163", "467", "88", "48"],
        backgroundColor: '#FFC900',
        pointBackgroundColor: '#FFC900',
        pointRadius: 8,
        pointStyle: 'circle',
        showLine: false,
        order: 1,
        hoverRadius: 10,
        xAxisID: 'xTwo'
      },
      {
        type: 'bar',
        label: 'Applied',
        data: ["486", "900", "724", "1084", "532", "618", "543"],
        backgroundColor: '#436BFF',
        borderWidth: 0,
        order: 2,
        barPercentage: 0.9,
        stack: 'stack 0',
      },
      {
        type: 'bar',
        label: 'Accepted',
        data: ["1", "147", "290", "511", "253", "306", "271"],
        backgroundColor: '#C40500',
        borderWidth: 0,
        barPercentage: 0.9,
        stack: 'stack 1',
        order: 4
      },
      {
        type: 'bar',
        label: 'Declined',
        data: ["616", "4373", "3998", "3400", "922", "1205", "1184"],
        /*backgroundColor: '#03570c', /* emerald */
        backgroundColor: '#006545',
        /* jade */
        borderWidth: 0,
        barPercentage: 0.9,
        stack: 'stack 0',
        order: 5
      },
      {
        type: 'bar',
        label: 'Processing',
        data: ["6", "23", "22", "1", "4", "2", "1"],
        backgroundColor: '#65ccD3',
        /* aqua + blue */
        borderWidth: 0,
        barPercentage: 0.9,
        stack: 'stack 0',
        order: 3
      },
    ]
  },
  options: {
    responsive: true,
    interaction: {
      intersect: false,
      mode: 'index',
      axis: 'y'
    },
    indexAxis: 'y',
    scales: {
      x: {
        stacked: true,
        ticks: {
          stepSize: 1000
        },
        beginAtZero: true
      },
      y: {
        stacked: true
      },
      xTwo: {
        type: 'linear',
        display: true,
        position: 'top',
        grid: {
          display: false,
          ticks: {
            display: false
          }
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<canvas id="historicChart"></canvas>

ChartJS：如何在图表上显示两个 "y axis" 刻度

ChartJS : How to display two "y axis" scales on a chart

chart.js

原版：

更新：