0

这个 javascript 代码

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
                    }]
                }
            }
        });
   
<!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>

无法正确显示条形图。有谁知道出了什么问题？

谢谢

4

4 回答 4

0

以下是您修复的代码

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 }]
    }
  }
});

输出

在此处输入图像描述

于 2018-09-28T18:38:30.107 回答
0 

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

希望这会帮助你。

于 2018-09-28T18:23:10.253 回答
0

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

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>

于 2018-09-28T18:27:59.737 回答
0

要扩展另一个答案，您可以使用map将单个对象转换为要绘制的图形。您只需将 x 值（“标签”）和 y 值（“数据”）分开即可。

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
      }]
    }
  }
});
<!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>

于 2018-09-28T18:29:18.797 回答