【问题标题】:Line chart is drawing before first point in Chart.js折线图在 Chart.js 中的第一个点之前绘制
【发布时间】:2016-08-02 22:30:20
【问题描述】:

我正在尝试绘制线加条形图。 每当我尝试绘制折线图(我尝试只绘制折线图,​​同样的错误)时,都会在第一个点之前绘制一条线:

Line Chart

这是我第一次尝试 Chart.js 2.0,我画的其他图表看起来都很棒,除了这个……有什么想法吗?

代码:

function Data() {
    $scope.barChartData = {
        labels: $scope.mesesLabels,
        datasets: [
            {
                type: 'bar',
                label: "" + myDate.getFullYear() - 1,
                backgroundColor: "#5799c7",
                data: $scope.infoAnoAnterior,
                borderColor: 'white',
                borderWidth: 2,
            },
            {
                type: 'bar',
                label: "" + myDate.getFullYear(),
                backgroundColor: "#ff7c40",
                data: $scope.infoAnoAtual,
            },
            {
                type: 'line',
                label: 'Média entre anos',
                backgroundColor: "rgba(220,20,20,0)",
                data: $scope.mediaEntreAnos,
                borderColor: 'red',
                borderWidth: 2,
                pointBorderColor: 'black',
                pointBackgroundColor: 'black'
            }, ]
    };
    drawChart();
}

function drawChart(){ 
    var ctx = document.getElementById("base").getContext("2d");
    window.myBar = new Chart(ctx, {
        type: 'bar',
        data: $scope.barChartData,
        options: {
            responsive: true,
            title: {
                display: true,
                text: 'Chart.js Combo Bar Line Chart'
            },
            legend: {
                display: true,
                labels: {
                    fontColor: 'rgb(255, 99, 132)'
                }
            },                
        }
    });
}

【问题讨论】:

  • 添加选项 scaleBeginAtZero: true,
  • @NagaSaiA 没用,同样的事情发生了......

标签: chart.js linechart


【解决方案1】:

您是否有可能是输入值而不是图表选项有问题? IE。一些重复的值。

【讨论】:

  • 刚刚仔细检查,也没有任何重复项
【解决方案2】:

要达到预期效果,请在选项中添加以下内容

scaleStartValue: 0

【讨论】:

  • 那也不起作用...还有其他建议吗?如果我的数据数组的第一个位置有空值,则该行不会出现,但图表不正确...顺便感谢您的宝贵时间!
【解决方案3】:

我在我的项目中添加了最新版本的 chart.js (2.2.1),它可以工作,不知道为什么 2.0 没有,但是感谢您的宝贵时间!

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-07-18
    • 1970-01-01
    • 2015-08-08
    • 1970-01-01
    • 2022-12-30
    • 1970-01-01
    • 2017-07-26
    • 2020-10-08
    相关资源
    最近更新 更多