Question

此javascript代码

#Example data 
Man1 <- c(25,25,30,30,30,30,35,35,40,40,40,40,45,45) 
Man2 <- c(25,25,30,30,40,40,35,35,40,40,30,30,45,45) 
DV <- c(24.8,25.2,29.9,30.3,35.2,35.7,34,35.1,40.3,39.8,35.8,35.9,44,44.8)
Data <- data.frame(Man1,Man2,DV)

#Plot 
ggplot(data = Data, aes(x = Man1, y = DV, group=as.factor(Man2), colour=as.factor(Man2))) +
  theme_bw()  +  
  geom_abline(intercept = 0, slope = 1, linetype = "longdash") +  
  geom_point(position = position_dodge(1)) 
  geom_smooth(method = "lm", aes(x = Man1, y = DV, group=as.factor(Man2),   fill=as.factor(Man2)))  + 
  scale_colour_manual(name = "Man2", values=c('grey20', 'blue','grey20','tomato3', 'grey20'))  + 
  scale_fill_manual(name = "Man2", values=c('blue','tomato3'))

var myBarChart = new Chart(document.getElementById("myChart"), {
            type: 'horizontalBar',
            data: [{x:'2016-12-25', y:20}, {x:'2016-12-26', y:10}],
            options: {
                scales: {
                    xAxes: [{
                        stacked: true
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                }
            }
        });

无法正确显示条形图。有人知道怎么了吗？

谢谢

Answer 1

var myBarChart = new Chart(document.getElementById("myChart"), {
  type: 'horizontalBar',
  data: {
   labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
   datasets: [{
    label: '# of Votes',
    data: [12, 19, 3, 5, 2, 3]
   }]
},
 options: {
  scales: {
    xAxes: [{
     stacked: true
    }],
    yAxes: [{
     stacked: true
    }]
   }
 }
});

   
<!DOCTYPE html>
<html>
    <head>
    <title>Title of the document</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
   </head>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
    </body>
</html>

您可以按以下方式将数据传递到数组中：

data: {
   labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
   datasets: [{
    label: '# of Votes',
    data: [12, 19, 3, 5, 2, 3]
   }]

datasets然后是data

这建议一种将数据转换为这种模式的方法：Data with pair X and Y values

希望这会对您有所帮助。

Answer 2

您可能正在寻找这样的东西：

new Chart(document.getElementById("myChart"),
{
  type: "horizontalBar",
  data: {
    labels: [
      "2016-12-25",
      "2016-12-26"
    ],
    datasets: [
      {
        label: "My First Dataset",
        data: [
          20,
          10
        ],
        fill: false,
        backgroundColor: [
          "rgba(255, 99, 132, 0.2)",
          "rgba(255, 159, 64, 0.2)"
        ],
        borderColor: [
          "rgb(255, 99, 132)",
          "rgb(255, 159, 64)"
        ],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});

   
<!DOCTYPE html>
<html>
    <head>
    <title>Title of the document</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
   </head>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
    </body>
</html>

Answer 3

要扩展其他答案，可以使用sudo pip install sympy -t /path将单个对象转换为图形对象。您只需将x值（“标签”）和y值（“数据”）分开。

map

var toGraph = [{
  x: '2016-12-25',
  y: 20
}, {
  x: '2016-12-26',
  y: 10
}];

new Chart(document.getElementById("myChart"), {
  "type": "horizontalBar",
  "data": {
    "labels": toGraph.map(p => p.x),
    "datasets": [{
      "label": "My First Dataset",
      "data": toGraph.map(p => p.y),
      "fill": true,
      "backgroundColor": "blue"
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});

Answer 4

下面是固定的代码

HTML

<!DOCTYPE html>
<html>
    <head>
    <title>Title of the document</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
   </head>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
    </body>
</html>

JS

var myBarChart = new Chart(document.getElementById("myChart"), {
  type: "bar",
  data: {
    datasets: [
      {
        label: "2016-12-25",
        data: [{ x: "2016-12-25", y: 20 }],
        backgroundColor: "#D6E9C6"
      },
      {
        label: "2016-12-26",
        data: [{ x: "2016-12-26", y: 10 }],
        backgroundColor: "#FAEBCC"
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{ stacked: true }],
      yAxes: [{ stacked: true }]
    }
  }
});

输出

如何在chart.js中显示条形图？

4 个答案: