我正在尝试向我的图表添加面积梯度,类似于面积或面积线图。不幸的是,我不能使用它们,因为它们会使我的图表显得无趣,因为我的数据通常在大约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
}
}]
});
我看了这里和文档中的各种示例,但图表都是面积图,面积图或样条图。我的必须是线型图表,否则事情看起来会很无聊。
编辑:
我不清楚要达到的目标。基本上,我希望线下具有相同的渐变效果,就像面积图一样,但是可悲的是,我不能使用面积图,样条线或面积图线图,因为它们都使曲线弯曲并使我觉得有点无聊。希望这可以清除一些东西。
谢谢大家的帮助
最佳答案
您可以在设置area
的条件下使用类型threshold: null
。即使在数据范围为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/