首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript Chart.js V4切换图表中的每个条，同时每个条下有不同的标签.怎么做

I am trying to create a barchart with several different datasets but I'm struggling with getting labels below each bar. This is what I currently have. enter image description here

我想在条形图下面也有标签，而不仅仅是在图例中.下面是我的数据.

{
    "labels": [
        ""
    ],
    "datasets": [
        {
            "label": "testname1",
            "borderColor": "rgba(254, 112, 150, 1)",
            "backgroundColor": "rgba(254, 112, 150, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                58
            ]
        },
        {
            "label": "testname2",
            "borderColor": "rgba(54, 215, 232, 1)",
            "backgroundColor": "rgba(54, 215, 232, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                60
            ]
        },
        {
            "label": "testname3",
            "borderColor": "rgba(6, 185, 157, 1)",
            "backgroundColor": "rgba(6, 185, 157, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                21
            ]
        },
        {
            "label": "testname4",
            "borderColor": "rgba(242, 197, 124, 1)",
            "backgroundColor": "rgba(242, 197, 124, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                35
            ]
        },
        {
            "label": "testname5",
            "borderColor": "rgba(54,70,82, 1)",
            "backgroundColor": "rgba(54,70,82, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                32
            ]
        },
        {
            "label": "testname6",
            "borderColor": "rgba(68, 94, 147, 1)",
            "backgroundColor": "rgba(68, 94, 147, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                75
            ]
        },
        {
            "label": "testname7",
            "borderColor": "rgba(143, 57, 133, 1)",
            "backgroundColor": "rgba(143, 57, 133, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                5
            ]
        },
        {
            "label": "testname8",
            "borderColor": "rgba(255, 209, 102, 1)",
            "backgroundColor": "rgba(255, 209, 102, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                0
            ]
        },
        {
            "label": "testname9",
            "borderColor": "rgba(67, 129, 193, 1)",
            "backgroundColor": "rgba(67, 129, 193, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                42
            ]
        },
        {
            "label": "testname10",
            "borderColor": "rgba(135, 61, 72, 1)",
            "backgroundColor": "rgba(135, 61, 72, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                76
            ]
        },
        {
            "label": "testname11",
            "borderColor": "rgba(42, 71, 71, 1)",
            "backgroundColor": "rgba(42, 71, 71, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                75
            ]
        },
        {
            "label": "testname12",
            "borderColor": "rgba(237, 191, 133, 1)",
            "backgroundColor": "rgba(237, 191, 133, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                34
            ]
        },
        {
            "label": "testname13",
            "borderColor": "rgba(187, 40, 55, 1)",
            "backgroundColor": "rgba(187, 40, 55, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                59
            ]
        },
        {
            "label": "testname14",
            "borderColor": "rgba(115, 92, 221, 1)",
            "backgroundColor": "rgba(115, 92, 221, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                98
            ]
        },
        {
            "label": "testname15",
            "borderColor": "rgba(144, 0, 179, 1)",
            "backgroundColor": "rgba(144, 0, 179, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                64
            ]
        }
    ]
}

这是我的 Select 

{
    "scales": {
        "y": {
            "ticks": {
                "display": true
            }
        },
        "x": {
            "display": false
        }
    },
    "plugins": {
        "legend": {
            "display": {
                "displayLegend": true
            },
            "position": "top"
        },
        "tooltip": {
            "callbacks": {}
        },
        "elements": {
            "point": {
                "radius": 0
            }
        }
    }
}

我可以设法在列下面添加标签，如果我使它全部1个数据集，但所有列是相同的 colored颜色 ，你不能切换它们. 我也试过这个链接Chart.js manipulate each bar in chart with different labels.但这是用于chartjs的第二个版本，在当前版本中不再工作.在插件之前，路径一直返回cannot set on undefined，当我在chart对象中发现xAxes时，它是undefined.

有人知道如何在我的条形图列下获取标签而不使所有数据集？

推荐答案

您可以添加一个辅助x轴，并将该轴的标签设置为 afterTickToLabelConversion个数据集中的visible个 这个轴的回调.

该轴的配置可能如下所示:

   x_dataset_labels: {
      type: "linear",
      min: 0,
      max: 1,
      afterTickToLabelConversion(scale){
         const chart = scale.chart;
         const visible = Array.from({length: chart.data.datasets.length},
               (_, i)=>!chart.getDatasetMeta(i).hidden ? i : false).filter(vis => vis!==false),
            nVisible = visible.length;
         scale.ticks = Array.from({length: nVisible}, (_, i) => ({
            value: (i+0.5)/nVisible, label: chart.data.datasets[visible[i]].label || ''
         }));
      },
      offset: false
   }

添加了一个包含问题中的数据和选项的片段，并添加了这个轴:

const data = {
    "labels": [
        ""
    ],
    "datasets": [
        {
            "label": "testname1",
            "borderColor": "rgba(254, 112, 150, 1)",
            "backgroundColor": "rgba(254, 112, 150, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                58
            ]
        },
        {
            "label": "testname2",
            "borderColor": "rgba(54, 215, 232, 1)",
            "backgroundColor": "rgba(54, 215, 232, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                60
            ]
        },
        {
            "label": "testname3",
            "borderColor": "rgba(6, 185, 157, 1)",
            "backgroundColor": "rgba(6, 185, 157, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                21
            ]
        },
        {
            "label": "testname4",
            "borderColor": "rgba(242, 197, 124, 1)",
            "backgroundColor": "rgba(242, 197, 124, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                35
            ]
        },
        {
            "label": "testname5",
            "borderColor": "rgba(54,70,82, 1)",
            "backgroundColor": "rgba(54,70,82, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                32
            ]
        },
        {
            "label": "testname6",
            "borderColor": "rgba(68, 94, 147, 1)",
            "backgroundColor": "rgba(68, 94, 147, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                75
            ]
        },
        {
            "label": "testname7",
            "borderColor": "rgba(143, 57, 133, 1)",
            "backgroundColor": "rgba(143, 57, 133, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                5
            ]
        },
        {
            "label": "testname8",
            "borderColor": "rgba(255, 209, 102, 1)",
            "backgroundColor": "rgba(255, 209, 102, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                0
            ]
        },
        {
            "label": "testname9",
            "borderColor": "rgba(67, 129, 193, 1)",
            "backgroundColor": "rgba(67, 129, 193, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                42
            ]
        },
        {
            "label": "testname10",
            "borderColor": "rgba(135, 61, 72, 1)",
            "backgroundColor": "rgba(135, 61, 72, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                76
            ]
        },
        {
            "label": "testname11",
            "borderColor": "rgba(42, 71, 71, 1)",
            "backgroundColor": "rgba(42, 71, 71, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                75
            ]
        },
        {
            "label": "testname12",
            "borderColor": "rgba(237, 191, 133, 1)",
            "backgroundColor": "rgba(237, 191, 133, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                34
            ]
        },
        {
            "label": "testname13",
            "borderColor": "rgba(187, 40, 55, 1)",
            "backgroundColor": "rgba(187, 40, 55, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                59
            ]
        },
        {
            "label": "testname14",
            "borderColor": "rgba(115, 92, 221, 1)",
            "backgroundColor": "rgba(115, 92, 221, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                98
            ]
        },
        {
            "label": "testname15",
            "borderColor": "rgba(144, 0, 179, 1)",
            "backgroundColor": "rgba(144, 0, 179, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                64
            ]
        }
    ]
};

const options = {
    "scales": {
        "y": {
            "ticks": {
                "display": true
            }
        },
        "x": {
            "display": false
        },
        x_dataset_labels: {
            type: "linear",
            min: 0,
            max: 1,
            afterTickToLabelConversion(scale){
                const chart = scale.chart;
                const visible = Array.from({length: chart.data.datasets.length},
                        (_, i)=>!chart.getDatasetMeta(i).hidden ? i : false).filter(vis => vis!==false),
                    nVisible = visible.length;
                scale.ticks = Array.from({length: nVisible}, (_, i) => ({
                    value: (i+0.5)/nVisible, label: chart.data.datasets[visible[i]].label || ''
                }));
            },
            offset: false
        }
    },
    "plugins": {
        "legend": {
            "display": {
                "displayLegend": true
            },
            "position": "top"
        },
        "tooltip": {
            "callbacks": {}
        },
        "elements": {
            "point": {
                "radius": 0
            }
        }
    }
};

new Chart("myChart", {type: "bar", data, options});
<div style="height:70vh">
    <canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

同样的，加上axis作为插件实现，这也有 网格和刻度标记的一些选项:

const data = {
    "labels": [
        ""
    ],
    "datasets": [
        {
            "label": "testname1",
            "borderColor": "rgba(254, 112, 150, 1)",
            "backgroundColor": "rgba(254, 112, 150, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                58
            ]
        },
        {
            "label": "testname2",
            "borderColor": "rgba(54, 215, 232, 1)",
            "backgroundColor": "rgba(54, 215, 232, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                60
            ]
        },
        {
            "label": "testname3",
            "borderColor": "rgba(6, 185, 157, 1)",
            "backgroundColor": "rgba(6, 185, 157, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                21
            ]
        },
        {
            "label": "testname4",
            "borderColor": "rgba(242, 197, 124, 1)",
            "backgroundColor": "rgba(242, 197, 124, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                35
            ]
        },
        {
            "label": "testname5",
            "borderColor": "rgba(54,70,82, 1)",
            "backgroundColor": "rgba(54,70,82, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                32
            ]
        },
        {
            "label": "testname6",
            "borderColor": "rgba(68, 94, 147, 1)",
            "backgroundColor": "rgba(68, 94, 147, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                75
            ]
        },
        {
            "label": "testname7",
            "borderColor": "rgba(143, 57, 133, 1)",
            "backgroundColor": "rgba(143, 57, 133, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                5
            ]
        },
        {
            "label": "testname8",
            "borderColor": "rgba(255, 209, 102, 1)",
            "backgroundColor": "rgba(255, 209, 102, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                0
            ]
        },
        {
            "label": "testname9",
            "borderColor": "rgba(67, 129, 193, 1)",
            "backgroundColor": "rgba(67, 129, 193, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                42
            ]
        },
        {
            "label": "testname10",
            "borderColor": "rgba(135, 61, 72, 1)",
            "backgroundColor": "rgba(135, 61, 72, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                76
            ]
        },
        {
            "label": "testname11",
            "borderColor": "rgba(42, 71, 71, 1)",
            "backgroundColor": "rgba(42, 71, 71, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                75
            ]
        },
        {
            "label": "testname12",
            "borderColor": "rgba(237, 191, 133, 1)",
            "backgroundColor": "rgba(237, 191, 133, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                34
            ]
        },
        {
            "label": "testname13",
            "borderColor": "rgba(187, 40, 55, 1)",
            "backgroundColor": "rgba(187, 40, 55, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                59
            ]
        },
        {
            "label": "testname14",
            "borderColor": "rgba(115, 92, 221, 1)",
            "backgroundColor": "rgba(115, 92, 221, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                98
            ]
        },
        {
            "label": "testname15",
            "borderColor": "rgba(144, 0, 179, 1)",
            "backgroundColor": "rgba(144, 0, 179, 1)",
            "borderWidth": 1,
            "categoryPercentage": 1,
            "data": [
                64
            ]
        }
    ]
};

const options = {
    "scales": {
        "y": {
            "ticks": {
                "display": true
            }
        },
        "x": {
            "display": false
        }
    },
    "plugins": {
        "legend": {
            "display": {
                "displayLegend": true
            },
            "position": "top"
        },
        "tooltip": {
            "callbacks": {}
        },
        "elements": {
            "point": {
                "radius": 0
            }
        },
        one_bar_datasets_x_labels: {
            tickLength: 8,
            color: 'rgba(0, 0, 0, 0.3)',
            gridVisible: true,
            gridLineDash: [5, 5]
        }
    }
};

const pluginOneBarDatasetsXLabels = {
    id: 'one_bar_datasets_x_labels',
    beforeInit(chart, _, options){
        chart.options.scales.x_dataset_labels = {}
        chart.options.scales.x_dataset_labels.type = 'linear';
        chart.options.scales.x_dataset_labels.min = 0;
        chart.options.scales.x_dataset_labels.max = 1;
        chart.options.scales.x_dataset_labels.offset = false;
        chart.options.scales.x_dataset_labels.grid = {};
        chart.options.scales.x_dataset_labels.grid.display = !!options.gridVisible;
        if(options.tickLength || options.color){
            chart.options.scales.x_dataset_labels.grid.tickLength = options.tickLength || 0;
            chart.options.scales.x_dataset_labels.grid.color = options.color || 'rgba(0,0,0,0.1)';
        }
        if(options.gridLineDash){
            chart.options.scales.x_dataset_labels.border = {};
            chart.options.scales.x_dataset_labels.border.dash = options.gridLineDash;
        }
        chart.options.scales.x_dataset_labels.afterTickToLabelConversion = function(scale){
            const visible = Array.from({length: scale.chart.data.datasets.length},
                    (_, i)=>!scale.chart.getDatasetMeta(i).hidden ? i : false).filter(vis => vis!==false),
                nVisible = visible.length;
            scale.ticks = Array.from({length: nVisible}, (_, i) => ({
                value: (i+0.5)/nVisible, label: scale.chart.data.datasets[visible[i]].label || ''
            }));
        }
    }
}

new Chart("myChart", {type: "bar", data, options, plugins: [pluginOneBarDatasetsXLabels]});
<div style="height:70vh">
    <canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Javascript相关问答推荐

微软Edge Select 间隙鼠标退出问题

当在select中 Select 选项时，我必须禁用不匹配的 Select

我不知道为什么setwritten包装promise 不能像我预期的那样工作

docx.js：如何在客户端使用文档修补程序

Angular：动画不启动

当试图显示小部件时，使用者会出现JavaScript错误.

未捕获错误：[]：getActivePinia()被调用，但没有活动Pinia.🍍""在调用app.use(pinia)之前，您是否try 使用store ？""

提交链接到AJAX数据结果的表单

用JS从平面文件构建树形 struct 的JSON

使用js构造一个html<；ath&>元素并不能使其正确呈现

如何使用基于promise (非事件emits 器)的方法来传输数据？

删除加载页面时不存在的元素(JavaScript)

传递方法VS泛型对象VS事件特定对象

未捕获的运行时错误：调度程序为空

将嵌套数组的元素乘以其深度，输出一个和

通过跳过某些元素的对象进行映射

postman 预请求中的hmac/sha256内标识-从js示例转换

如果我的列有条件，我如何呈现图标？

如何使用Reaction路由导航测试挂钩？

如何设置时间选取器的起始值，仅当它获得焦点时？

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630