gpt4 book ai didi

javascript - 向线 Highcharts 添加区域渐变

转载 作者:太空宇宙 更新时间:2023-11-04 01:06:06 25 4
gpt4 key购买 nike

我正在尝试向我的 highchart 添加区域渐变,类似于区域或区域样条图。不幸的是,我不能使用它们,因为它们会使我的图表看起来无趣,因为我的数据通常在 3 左右的差异之间变化。这是我的代码笔:https://codepen.io/gabedesigns/pen/GXZPqg?editors=1111这是一些示例代码:

    $('#Platinum').highcharts('StockChart', {
colors: ['#E48701'],
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
navigator: {
enabled: true
},
yAxis: {
labels: {
format: '${value:,.0f}'
},
title: {
text: 'Platinum'
},
series: [{
name: 'Price',
data: [787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 786, 787, 787, 786, 786, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 786, 786, 786, 787, 787, 787, 788, 787, 787, 788, 788, 787, 787, 787, 787, 787, 787, 788, 787, 787, 787, 787, 787, 787, 786, 787, 786, 786, 786, 785, 785, 785, 785, 785, 785, 785, 785, 785, 785, 786, 785, 785, 785, 785, 784, 785, 785, 784, 785, 784, 784, 784, 785, 785, 785, 785, 785, 785, 785, 784],
tooltip: {
valueDecimals: 0
}
}]
});

我查看了此处和文档中的各种示例,但这些图表都是面积图、区域样条图或样条图。我的图表必须是线型图表,否则看起来会很无聊。

编辑:我不清楚我想要达到的目标。基本上我希望线下有相同的渐变效果,就像面积图一样,但遗憾的是我不能使用面积图、样条图或面积样条图,因为它们都使线 flex 并使图表在我看来有点无聊。希望这能解决一些问题。

谢谢大家的帮助

最佳答案

在设置 threshold: null 的条件下,您可以使用 area 类型 ... 这甚至适用于 3 的数据范围。以下是包含您的数据的区域高位图示例。

// create the chart
Highcharts.stockChart('container', {

title: {
text: 'Platinum'
},

xAxis: {
gapGridLineWidth: 0
},

rangeSelector : {
buttons: [
{
type: 'all',
count: 1,
text: 'All'
}
],
selected: 1,
inputEnabled: false
},

series: [{
name: 'Price',
type: 'area',
data: [787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 786, 787, 787, 786, 786, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 786, 786, 786, 787, 787, 787, 788, 787, 787, 788, 788, 787, 787, 787, 787, 787, 787, 788, 787, 787, 787, 787, 787, 787, 786, 787, 786, 786, 786, 785, 785, 785, 785, 785, 785, 785, 785, 785, 785, 786, 785, 785, 785, 785, 784, 785, 785, 784, 785, 784, 784, 784, 785, 785, 785, 785, 785, 785, 785, 784],
gapSize: 5,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
threshold: null
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>

关于javascript - 向线 Highcharts 添加区域渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52184896/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com