Javascript 像这样的线影，可能吗？（Highcharts.js）_Javascript_Highcharts

Javascript 像这样的线影，可能吗？（Highcharts.js）

javascript highcharts

Javascript 像这样的线影，可能吗？（Highcharts.js）,javascript,highcharts,Javascript,Highcharts,我需要得到这个图表，我有一个线阴影的问题。我试图使用linerGradient，但我没有得到我需要的。。。请帮帮我。也许有人知道创建这种图表的另一种解决方案注：我也试过Chart.js 海特哈特代码如下 var myChart = Highcharts.chart('highchart', { chart: { type: 'spline', zoomType: 'x', backgroundColor: 'rgba(255,255,2

我需要得到这个图表，我有一个线阴影的问题。我试图使用linerGradient，但我没有得到我需要的。。。请帮帮我。也许有人知道创建这种图表的另一种解决方案

注：我也试过Chart.js

海特哈特代码如下

 var myChart = Highcharts.chart('highchart', {
    chart: {
        type: 'spline',
        zoomType: 'x',
        backgroundColor: 'rgba(255,255,255,0)',
        selectionMarkerFill: 'rgba(0,0,0,0.12)',
        spacing: [30,32,6,32]
    },
    title: {
        text: ''
    },
    xAxis: {
        type: 'datetime',
        lineColor: '#31313f',
        tickColor: '#2c2c3a',
        labels: {
            format: '<text style="display: block; font: 600 8px/12px \'Graphik LCG\', sans-serif; text-transform: uppercase; color: rgba(255,255,255,0.6);">{value:%H:%M}</text>'
        }
    },
    yAxis: {
        title: {
            text: null
        },
        gridLineColor: '#31313f',
        min: 0,
        max: 100,
        labels: {
            format: '<span style="font: 500 8px/12px \'Graphik LCG\', sans-serif; color: rgba(255,255,255,0.6);">{value}₽</span>',
            align: 'left',
            x: 0,
            y: -2
        }
    },
    plotOptions: {
        series: {
            marker: {
                enabled: false
            }
        },
    },
    series: [{
        data: [25,30,40,30,45,50,55,45,38],
        pointStart: Date.UTC(2017, 10, 17, 10),
        pointInterval: 3600 * 1000, // one hour
        borderWidth: 2,
        color: '#4974f5',
        marker: {
            fillColor: '#4974f5',
            lineColor: '#2b2b38',
            lineWidth: 2
        }
    }],
    legend: {
        enabled: false
    },
    tooltip: {
        backgroundColor: '#32323f',
        borderRadius: 10,
        borderWidth: 0,
        padding: 0,
        shadow: false,
        useHTML: true,
        headerFormat: '<span style="display: block; margin-bottom: 2px; font: 600 8px/12px \'Graphik LCG\', sans-serif; text-align: center; text-transform: uppercase; color: rgba(255,255,255,0.6);">{point.key}</span>',
        pointFormat: '<span style="display: block; font: 500 12px/16px \'Graphik LCG\', sans-serif; text-align: center; color: #fff;">{point.y}₽</span>',
        footerFormat: '',
        valueDecimals: 2
    }
});

var myChart=Highcharts.chart（'highchart'）{
图表：{
类型：“样条线”，
zoomType:'x'，
背景颜色：“rgba（255255,0）”，
selectionMarkerFill:'rgba（0,0,0,0.12）'，
间距：[30,32,6,32]
},
标题：{
文本：“”
},
xAxis：{
键入：“日期时间”，
线条颜色：“#31313f”，
勾选颜色：“#2C3A”，
标签：{
格式：“{值：%H:%M}”
}
},
亚克斯：{
标题：{
文本：空
},
gridLineColor:“#31313f”，
分:0,，
最高：100，
标签：{
格式：'{value}₽',
对齐：“左”，
x:0,，
y:-2
}
},
打印选项：{
系列：{
标记：{
已启用：false
}
},
},
系列：[{
数据：[25,30,40,30,45,50,55,45,38]，
起点：UTC日期（2017年10月17日10日），
点间隔：3600*1000，//一小时
边界宽度：2，
颜色：“#4974f5”，
标记：{
填充颜色：'#4974f5'，
线条颜色：“#2b2b38”，
线宽：2
}
}],
图例：{
已启用：false
},
工具提示：{
背景颜色：“#32323f”，
边界半径：10，
边框宽度：0，
填充：0，
影子：错，
是的，
headerFormat:“{point.key}”，
pointFormat:“{point.y}”₽',
页脚格式：“”，
数值小数：2
}
});

这里的解决方案是在线条系列中添加一个阴影，并应用
clipPath
。剪辑路径需要基于图形的路径
现场演示：
阴影：

defs: { shadow: { tagName: 'filter', id: 'shadow', clipPath: 'url(#clipS)', children: [{ tagName: 'feDropShadow', dx: 0, dy: 0, stdDeviation: 10 }] } },

chart: { events: { load: function() { var chart = this, renderer = chart.renderer, clipPathD = chart.series[0].graphPath.slice(); // modify the path so that it can be used as a clip (closed area) clipPathD.splice(1, 0, 0, chart.chartHeight, "L", 0, clipPathD[2], 'L'); clipPathD.push("L", chart.chartWidth, clipPathD[clipPathD.length - 3], "L", chart.chartWidth, chart.chartHeight, "Z"); var clipPath = renderer.createElement('clipPath').add(renderer.defs).attr({ id: 'clipS' }); renderer.path(clipPathD).add(clipPath); } } },

.highcharts-graph { filter: url(#shadow); clip-path: url(#clipS); }
剪辑路径：

defs: { shadow: { tagName: 'filter', id: 'shadow', clipPath: 'url(#clipS)', children: [{ tagName: 'feDropShadow', dx: 0, dy: 0, stdDeviation: 10 }] } },

chart: { events: { load: function() { var chart = this, renderer = chart.renderer, clipPathD = chart.series[0].graphPath.slice(); // modify the path so that it can be used as a clip (closed area) clipPathD.splice(1, 0, 0, chart.chartHeight, "L", 0, clipPathD[2], 'L'); clipPathD.push("L", chart.chartWidth, clipPathD[clipPathD.length - 3], "L", chart.chartWidth, chart.chartHeight, "Z"); var clipPath = renderer.createElement('clipPath').add(renderer.defs).attr({ id: 'clipS' }); renderer.path(clipPathD).add(clipPath); } } },

.highcharts-graph { filter: url(#shadow); clip-path: url(#clipS); }
CSS:

defs: { shadow: { tagName: 'filter', id: 'shadow', clipPath: 'url(#clipS)', children: [{ tagName: 'feDropShadow', dx: 0, dy: 0, stdDeviation: 10 }] } },

chart: { events: { load: function() { var chart = this, renderer = chart.renderer, clipPathD = chart.series[0].graphPath.slice(); // modify the path so that it can be used as a clip (closed area) clipPathD.splice(1, 0, 0, chart.chartHeight, "L", 0, clipPathD[2], 'L'); clipPathD.push("L", chart.chartWidth, clipPathD[clipPathD.length - 3], "L", chart.chartWidth, chart.chartHeight, "Z"); var clipPath = renderer.createElement('clipPath').add(renderer.defs).attr({ id: 'clipS' }); renderer.path(clipPathD).add(clipPath); } } },

.highcharts-graph { filter: url(#shadow); clip-path: url(#clipS); }

关于SVG定义的文档：

API参考：
所以。。。你已经有什么了？你已经试过什么了？您是否使用任何库来执行此操作？我有一个图表，但我已经删除了linerGradient。现在我只需要线阴影。是的，我也试过Chart.js，但我觉得它比highcharts小。也许我错了，请显示一些代码，以便人们能够帮助你。我添加了代码，对不起，这不是你想要的？