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的div来包裹画布。我相信你可以免费获得响应。代码如下。

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/

使用自定义代码将Chartjs更新为2.5

1 个答案: