图表J隐藏X轴上的奇数索引值/标签值

ijxebb2r 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(186)

["06月10日","06月13日","06月14日","06月15日","06月16日","06月17日","06月20日","06月21日","06月22日","06月23日","06月24日","06月27日","06月28日","06月29日","06月30日","07月01日","07月04日","07月05日","07月06日","07月07日","07月08日","07月11日","07月12日","07月13日","07月14日","07月15日","07月19日","07月20日","07月21日","07月22日","07月25日","07月26日","07月27日","07月28日","07月29日","08月01日","08月02日","08月03日","08月04日","08月05日","08月08日","08月09日","08月10日","08月12日","08月15日","08月16日","08月17日"]

以上是所有的标签，我想显示在图表上，但它隐藏了所有奇数索引值从图表上只显示偶数索引值从上述列表.查看图表，它缺少一些标签.如果你看到的顺序，所有偶数索引值显示和奇数被隐藏..
这是我所有的图表代码。

const data = {
            labels: dates,
            datasets: [{
                type: 'line',
                label: 'Line graph',
                data: line,
                fill: false,
                borderColor: '#ff5252',
                backgroundColor: '#ff5252',
                yAxisID: 'y-axis-a',
                lineTension: 0.1,
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderWidth: 1,
                pointHoverRadius: 4,
                pointRadius: 5,
                pointHitRadius: 10,
            },{
                type: 'bar',
                label: 'Bar graph',
                data: diff,
                borderColor: colors,
                backgroundColor: colors,
                borderWidth: 2,
                pointRadius: 5,
                pointBorderWidth: 1,
                pointHoverRadius: 7,
                pointHoverBorderWidth: 2,
                fill: true,
                showLabelBackdrop:true,
            },]
        };
        const config = {
            type:"scatter",
            data: data,
            options: {
                legend: {
                    display: false
                },
                responsive: false,
                scales: {
                    y: {
                        display:false,
                        beginAtZero: true,
                        ticks: {
                            color: "#ffffff",
                            font: {
                                size: 14,
                            },
                        },
                    },
                },
                plugins: {
                    labels: {
                        ticks:{
                            font: {
                            size: 22
                        },
                            color: "#ffffff",
                        }
                    },
                    title: {
                        display: true,
                        text: title,
                        padding: {
                            top: 10,
                            bottom: 30,
                        },
                        font: {
                            size: 22,
                        },
                        color: "#ffffff"
                    }
                }
            }
        };

        const ctx = document.querySelector(`#chart${index+1}`).getContext('2d');

        const myChart = new Chart(ctx, config)

我也尝试过.. x:{ticks:{autoSkip:false}}当我这样做时，它会将我的标签更改为数字..

chart.js

来源：https://stackoverflow.com/questions/73391215/chartjs-hiding-odd-index-values-on-x-axes-labels-values

1条答案

按热度按时间

dzjeubhm1#

当您使用类型：“scatter”时，****散点图基于基本折线图，其中x轴更改为线性轴。若要使用散点图，数据必须作为包含X和Y属性的对象传递。下面的示例创建一个具有4个点link for charts scatter charts的散点图
如果您没有定义x和y的值，则会将x轴和y轴用作线性轴，然后您可以操作折线图和条形图的x轴。如果您不在config中提供chart_type，则会将轴用作线性轴，您可以使用xAxisID：'x轴条形图'，xAxisID：'x-axis-line'，然后隐藏1个x轴，并且autoSkip=False，它将显示您的所有值。我附加了下面的所有代码。

const data = {
            labels: dates,
            datasets: [{
                type: 'line',
                label: 'Line graph',
                data: line,
                fill: false,
                borderColor: '#ff5252',
                backgroundColor: '#ff5252',
                yAxisID: 'y-axis-a',
                xAxisID: 'x-axis-line',
                lineTension: 0.5,
                order:1,
            },{
                type: 'bar',
                label: 'Bar graph',
                data: diff,
                borderColor: colors,
                backgroundColor: colors,
                borderWidth: 2,
                pointRadius: 5,
                xAxisID: 'x-axis-bar',
                pointBorderWidth: 1,
                pointHoverRadius: 7,
                pointHoverBorderWidth: 2,
                fill: true,
                showLabelBackdrop:true,
                order:2
            },]
        };
        const config = {
            data: data,
            options: {
                responsive: false,
                scales: {
                    y: {
                        display:false,
                        beginAtZero: true,
                        ticks: {
                            color: "#ffffff",
                            font: {
                                size: 14,
                            },
                        },
                    },
                    'x-axis-bar':{
                        ticks:{
                            autoSkip:false,
                            stepSize:1.0,
                        }
                    },
                    'x-axis-line':{
                      display:false  
                    }
                },
                plugins: {
                    labels: {
                        ticks:{
                            font: {
                            size: 22
                        },
                            color: "#ffffff",
                        }
                    },
                    title: {
                        display: true,
                        text: title,
                        padding: {
                            top: 10,
                            bottom: 30,
                        },
                        font: {
                            size: 22,
                        },
                        color: "#ffffff"
                    }
                }
            }
        };

        const ctx = document.querySelector(`#chart${index+1}`).getContext('2d');

        const myChart = new Chart(ctx, config)

赞(0）回复(0）举报 2022-11-09

我来回答

图表J隐藏X轴上的奇数索引值/标签值

1条答案

相关问题

热门标签

最新问答