chart.js - 图表js仅在迷你图上显示2个数据点

标签 chart.js

Charts js 仅在具有 24 个数据点的迷你图样式图表上显示 2 个数据点。这是图表大小问题吗?我有另一个基于相同数据的图表可以正常工作……这是工具提示问题还是尺寸问题?我似乎无法让它显示所有数据。我已经尝试了很多配置,但他的问题仍然存在。谢谢!

enter image description here
enter image description here

        var style = {
        maintainAspectRatio: false,
        legend: {
            display: false
        },

        tooltips: {
            bodySpacing: 1,
            mode: "nearest",
            intersect: 0,
            position: "nearest",
            xPadding: 2,
            yPadding: 2,
            caretPadding: 5,

        },
        hover: {mode: null},

        responsive: false,

        scales: {
            yAxes: [{
                ticks: {
            display: false
        },
                gridLines: 0,
                gridLines: {
                    zeroLineColor: "transparent",
                    drawTicks: false,
                    display: false,
                    drawBorder: false
                }
            }],
            xAxes: [{
                display: 0,
                gridLines: 0,
                ticks: {
                    display: false
                },
                gridLines: {
                    zeroLineColor: "transparent",
                    drawTicks: false,
                    display: false,
                    drawBorder: false
                }
            }]
        },
        layout: {
            padding: {left: 10, right: 10, top: 10, bottom: 10}
        }
    };

    var config = {

        type: 'line',
        responsive: true,

        data: {
            datasets: [{
                label: "",
                borderColor: "#80b6f4",
                pointBorderColor: "#FFF",
                pointBackgroundColor: "#18ce0f",
                pointBorderWidth: 1,
                pointHoverRadius: 2,
                pointHoverBorderWidth: 1,
                pointRadius: 1,
                fill: true,
                backgroundColor:gradientFill,
                borderWidth: 2,
                scaleFontColor: "#FFF",
                fontColor: "#FFF",
                data: cleandata,
                drawBorder: true,

            }]
        },
        options: {

            layout: {
                padding: {
                left: 5,
                right: 5,
                top:5,
                bottom: 5
        }
    }
            },
        options: style
    }
    showChart = new Chart(ctx , config);
    });

最佳答案

我发现了这个问题。我没有正确传递我的标签数据。它应该是这样通过的:

data: {
       labels: labels,
        datasets: [{ 

等等...

关于chart.js - 图表js仅在迷你图上显示2个数据点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50125849/

相关文章:

chart.js - ChartJS :align zeros on chart with multi axes

chart.js - 如何设置折线图的chart.js网格颜色

javascript - 从数组向 Chart.JS 添加标签和颜色

javascript - Chart.js 绘制自定义网格线

javascript - 我如何为图表 js 使用内联插件内部标题?

javascript - 从 Canvas 中获取 chart.js 的图像并将其显示为图像

angular - 我正在使用 Chart.js 并希望更改工具提示以根据时间戳输入显示日期格式

javascript - 如何向 chart.js 折线图添加点?

python - chartsjs 的标签属性不采用字符串类型的上下文变量

javascript - Chart.js 2.1.6 : Drawing horizontal Limit Lines?