javascript - 仅将颜色应用于 Chart.js 折线图的下部

标签 javascript reactjs chart.js

我有这个折线图 line chart

如何只为图表线下方部分的背景着色?就像这张图片enter image description here

这是我正在使用的代码(这是 react 组件的一部分,正如您可以从 this.props 中看到的):

    var canvas: any = document.getElementById('temperature-chart');
    var ctx = canvas.getContext('2d');
    var chart = new Chart(ctx, {
        type: 'line',

        // The data for our dataset
        data: {
            labels: this.props.labels,
            datasets: [{
                label: "Temperatures",
                backgroundColor: 'rgba(255, 206, 86, 0.2)',
                borderColor: 'rgba(255, 206, 86, 1)',
                data: this.props.numbers,
                borderWidth: 1
            }],
        },

我还定制了一些选项来删除 y 轴并添加标签。

最佳答案

我的解决方案 -

    datasets: [
        {
          fill:'start',
          backgroundColor: 'what you want',
          ...
        }

关于javascript - 仅将颜色应用于 Chart.js 折线图的下部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47859398/

相关文章:

javascript - 在 Nodejs/Express 中上传图片最简单的方法是什么

javascript - 在不使用禁用属性的情况下使输入字段看起来已禁用

html - 缺少有效的YouTube API key

javascript - 使用 Chart.js,我可以为图表标题中的每一行文本指定不同的字体大小吗?

javascript - 尝试在 Vue 应用程序中更新 Chart.js 中的图表数据时出现意外错误

javascript - 在 Chrome 中将下/上填充应用于具有最小值和最大值的 "input range"

javascript - jQuery 在加载后查找 id

reactjs - 未捕获的类型错误 : Cannot read property 'mountComponent' of undefined error when running create-react-app build version

reactjs - 同构 ReactJS 或 Web Components(Polymer) 开发人员应该遵循哪一个?

javascript - ChartJS - 滚动二十分钟 View