gridline/ticklines 虚线 canvas 虚线 flot.js

Question

如何在 flot.js 中的 x 轴 和 y 轴 中创建虚线？我不知道去图书馆哪里换。这是我使用 flot.js 在 canvas 上生成图表的代码。但我想要x轴上的虚线和[=]网格背景上的y轴 29=]。我尝试了 markingsStyle: 'dashed' 但没有成功。

plot = $.plot("#placeholder", [{
            dashes: { show: true },
            data: data,
            color: "rgb(255, 255, 255)",
            label: $("#hidsymbolid").val(),                    
        }, {
            data: dataBaseLine,
            color: "rgb(255, 255, 255)",
            lineStyle: "dashed"
        }
        ], {
            series: {
                lines: {
                    lineWidth: 1,
                    show: true,
                    lineJoin: "round",
                    lineCap: "round"
                },
                points: {                    
                    show: false
                }
            },
            grid: {
                hoverable: true,
                backgroundColor: {
                    colors: ["#3B3B3B", "#3B3B3B"]
                },                 
                markingsStyle: 'dashed'
            },         
            xaxis: {
                show: true,
                tickSize: parseFloat((maxvalue - minvalue) / 6),
                min: minvalue,
                max: maxvalue,
                dashes: { show: true },
                timeformat: "%H:%M:%S",              
                tickColor: "rgb(255, 255, 255)",            
            },
            yaxis: {
                show: true,
                dashes: { show: true },
                color: "rgb(255, 255, 255)",
                alignTicksWithAxis: 2               
            }
});

Answer 1

请试试这个。

setLineDash([5])

示例：-
var context = document.querySelector("canvas");
var cxt = context..getContext('2d');
cxt.beginPath();
cxt.setLineDash([9]);
cxt.rect(30,15,100,100);
cxt.stroke();

gridline/ticklines 虚线 canvas 虚线 flot.js

gridline/ticklines in dashed in canvas in flot.js

flot