javascript - 使用自定义代码将 Chartjs 更新到 2.5

Question

我正在使用此自定义代码来呈现负条形图值:

html

<canvas id="myChart" width="500" height="100"></canvas>

js

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July", "August"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40, -30]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90, -42]
        }
    ]
};

var options = {
    scaleBeginAtZero: false,
    responsive: true,
    scaleStartValue : -50 
};

var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx).Bar(data, options);

(在此代码笔上找到 http://codepen.io/ranstyr/pen/yepved ) 但是...该代码位于 Chartjs 版本 1.0.2 中，我需要使用 2.5

这是我可能更新到 2.5 的代码笔，但我没有让它工作。 http://codepen.io/nothingtoseehere/pen/oBOqJw

Answer 1

这是您正在寻找的内容的示例...

http://codepen.io/anon/pen/PWgeqx

根据我的经验，您需要一个定义了高度和宽度的 div 来包裹 Canvas 。我相信您可以免费获得响应。代码如下。

var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July", "August"],
        datasets: [
            {
                label: "My First dataset",
                backgroundColor: "rgba(220,220,220,0.5)",
                borderColor: "rgba(220,220,220,0.8)",
                hoverBackgroundColor: "rgba(220,220,220,0.75)",
                hoverBorderColor: "rgba(220,220,220,1)",
                borderWidth: 5,
                data: [65, 59, 80, 81, 56, 55, 40, -30]
            },
            {
                label: "My Second dataset",
                backgroundColor: "rgba(151,187,205,0.5)",
                borderColor: "rgba(151,187,205,0.8)",
                hoverBackgroundColor: "rgba(151,187,205,0.75)",
                hoverBorderColor: "rgba(151,187,205,1)",
                borderWidth: 5,
                data: [28, 48, 40, 19, 86, 27, 90, -42]
            }
        ]
    },
    options: {
        scales: {
            yAxes: [{
                display: true,
                ticks: {
                    beginAtZero: false,
                    min: -50
                }
            }]
        }
    }
});

这是 Chart.js 文档的链接。条形图和比例尺部分会很有帮助。 http://www.chartjs.org/docs/