使用chartjs在透明的情况下彼此绘制两个图 [英] Draw two plots using chartjs over one another with transparency

问题描述

在Chartjs中，我有两个图，如此处所示:

  var config = {类型:行"，数据: {标签: ["2017-07-03T01:05:00 + 0100"，....]，数据集:[{标签:消费"，填写:来源"，pointRadius:0，borderColor:#0000ff"，backgroundColor:"rgba(255,10,13,255)"，数据: [0.015625，0.0199861111111，...]，}，{填写:来源"，标签:"PV"，pointRadius:0，borderColor:#ebf909"，backgroundColor:"rgba(29,241,13,210)"，数据: [0.0，.....]，}]}，选项: {响应式的:是的，标题:{显示:true，文字:"Chart.js折线图-堆叠区域"}，工具提示:{模式:索引"，}，悬停:{模式:索引"}，比例尺:{x轴:[{scaleLabel:{显示:true，labelString:'时间'}}]，y轴:[{堆积:假，scaleLabel:{显示:true，labelString:'kWh'}}]}}};var ctx = document.getElementById("canvas").getContext("2d");var myChart = new Chart(ctx，config); 

有什么办法可以使红色的红色完全遮盖住绿色的情节吗?

解决方案

您需要将 fill 属性设置为 false 作为第一个数据集(红色一个)，使其透明.

 数据集:[{标签:消费"，填写:假，pointRadius:0，borderColor:#0000ff"，backgroundColor:"rgba(255,10,13,255)"，... 

或者，您也可以像这样减少背景色的不透明度...

  backgroundColor:"rgba(255，10，13，0.1)" 

这是 工作中的Codepen

In Chartjs I have two plots, as shown here:

        var config = {
            type: 'line',
            data: {
                labels: [
                    "2017-07-03T01:05:00+0100",
                    ....

                ],


            datasets: [


                {
                    label: "Consumption",
                    fill: 'origin',
                    pointRadius: 0,
                    borderColor: "#0000ff",
                    backgroundColor: "rgba(255,10,13,255)",
                    data: [


                    0.015625,
                    0.0199861111111,
                    ...

                    ],
                }
                ,
                {
                    fill: 'origin',   
                    label: "PV",
                    pointRadius: 0,
                    borderColor: "#ebf909",
                    backgroundColor: "rgba(29,241,13,210)", 
                    data: [

                    0.0,

                    .....

                    ],
                }




                ]
            },
            options: {

                responsive: true,
                title:{
                    display:true,
                    text:"Chart.js Line Chart - Stacked Area"
                },
                tooltips: {
                    mode: 'index',
                },
                hover: {
                    mode: 'index'
                },
                scales: {
                    xAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Time'
                        }
                    }],
                    yAxes: [{
                        stacked: false,
                        scaleLabel: {
                            display: true,
                            labelString: 'kWh'
                        }
                    }]
                }
            }
        };



var ctx = document.getElementById("canvas").getContext("2d");
var myChart  = new Chart(ctx, config);  

Is there any way I can make the green plot show through the red one in places where the latter completely obscures the former?

解决方案

You need to set fill property to false for the first dataset (the red one), to make it transparent.

datasets: [{
         label: "Consumption",
         fill: false,
         pointRadius: 0,
         borderColor: "#0000ff",
         backgroundColor: "rgba(255,10,13,255)",
         ...

or, you can also reduce the opacity of background color, like so ...

backgroundColor: "rgba(255, 10, 13, 0.1)"

Here is the working codepen

这篇关于使用chartjs在透明的情况下彼此绘制两个图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！