时间戳

首页 > 解决方案 > react js中的图表js标签问题

javascript - react js中的图表js标签问题

问题描述

我使用图表 js 显示数据，但标签没有正确应用，它适用于单列

我的图表代码是：

var dates =  ['Lonely','Relationship','Anexity','Hurt','Fear'];
        var ctxallSelect = document.getElementById('Emotional');
        window.allEmotion = new Chart(ctxallSelect, {
            type: 'bar',
            data: {
               labels: dates,
                datasets: [{
                    label: 'Lonely',
                    backgroundColor: [
                        'rgb(0, 156, 182)'                     
                         ],
                    borderColor: [
                        'rgb(0, 156, 182)'                                           
                    ],
                    data:[this.state.Lonely],
                    fill: false,
                }, {
                    label: 'Relationship',
                    fill: false,
                    backgroundColor: [
                        'rgb(0, 156, 182)'
                    ],
                    borderColor: [
                        'rgb(0, 156, 182)'
                    ],
                    data:  [this.state.Relationship],
                },

但我的图表标签如下所示：

图表

预期的

标签： javascriptreactjschartschart.js

解决方案

您的问题与您设置datainside的方式有关dataset。

我为您解决了这个问题做了一个现场演示： https ://codesandbox.io/s/boring-banach-lvffs?file=/src/App.js

数据是一个数组，该数组的每个位置都意味着一列，所以你应该这样做：

datasets: [
        {
          label: "Lonely",
           .....
          data: [30]
        },
        {
          label: "Relationship",
           .....
          data: [0,45]
        },

推荐阅读