如何使用 chartjs 创建浮动图表？

Question

我尝试使用 chartjs 创建浮动图表，但它似乎不起作用。 我尝试复制与http://pravopys.net/chartjs/samples/charts/bar/vertical.html相同的示例，但我的根本不渲染或抛出任何错误。

var myBarChart = new Chart(document.getElementById("bar-chart"), {
        type: 'bar',
        data: {
            labels: ['January', 'February', 'March'],
            datasets: [
                {
                    label: "Population (millions)",
                    data: [
                        [-2, 5],
                        [-20, 70],
                        [30, 80]
                    ],
                    backgroundColor: "rgba(75, 192, 192, 0.2)",
                    borderColor: "rgba(75, 192, 192, 1)",
                    borderWidth: 1,
                    fill: false,
                    lineTension: 0,
                    type: "bar"
                }
          ]
        },
        options: {
          legend: { display: false },
          title: {
            display: true,
            text: 'Predicted world population (millions) in 2050'
          }
        }
    });

不知道我在这里做错了什么。 该示例显示了我正在使用的数据集的数据结构。 任何帮助是极大的赞赏。

插件链接： http://www.plnkr.co/edit/bD1MgVvjuq7B4RM5Qcmh?p=preview

Answer 1

您需要一个 2d 上下文来绘制图表。 这是一个工作示例：

在您的代码中执行以下 2 项更改：

HTML

<canvas id="bar-chart" width="400" height="400"></canvas>

Javascript

var ctx = document.getElementById("bar-chart").getContext("2d");
var myBarChart = new Chart(ctx, ...)

资料来源： https://www.chartjs.org/docs/latest/#creating-a-chart