编辑-解决方案-修复语法错误!
下面的问题在正文中有两个答案,并链接到JSFiddle:
Highcharts Highstock How to add flags to chart drawn from embedded CSV data?
在每个答案中,csv数据都有几个带标题的列。JavaScript用于在Highstock图表上放置标志,具有诸如options.series[n]的代码行,其中n是整数。JavaScript还在“series”标签下的括号中包含了许多系列,例如:{},{},{type:flag}。我的问题是csv列如何显式Map到JavaScript代码中的options.series[#],并显式Map到series标记下列出的项目?
特别是,我想修改csv以包含一个或多个指示器列,而不破坏高列和低列上的标志。这个目标显示在底部。
这个链接https://jsfiddle.net/BlackLabel/8je3yfuc/有相关的片段如下所示:
<pre id="csv" style="display: none">
date,adj_high,adj_low,flag
2018-02-27,180.48,178.16,flag1
</pre>
Highcharts.stockChart('chart-container', {
...,
data: {
csv: document.getElementById('csv').innerHTML,
complete: function(options) {
const flagSeries = options.series[2];
flagSeries.data = flagSeries.data.filter(
dataEl => dataEl[1]
);
}
},
series: [{}, {}, {
type: 'flags',
keys: ['x', 'title']
}]
});
有四个csv标题(列),选项。series[1],和三个series {},{},{…类型:标志...}.为什么option.series[2]
中有一个“2”?
此链接https://jsfiddle.net/BlackLabel/ues10k8q/显示了相关片段:
<pre id="csv" style="display: none">
date,adj_high,adj_low,flag
2018-02-27,180.48,178.16,flag1,0
2018-02-28,180.615,178.05
2018-03-01,179.775,172.66
2018-03-02,176.3,172.45
2018-03-05,177.74,174.52
2018-03-06,178.25,176.13
2018-03-07,175.85,174.27
2018-03-08,177.12,175.07
2018-03-09,180.0,177.39
2018-03-12,182.39,180.21,flag2,1
2018-03-13,183.5,179.24
2018-03-14,180.52,177.81
2018-03-15,180.24,178.0701
2018-03-16,179.12,177.62
2018-03-19,177.47,173.66,flag3,2
2018-03-20,176.8,174.94
2018-03-21,175.09,171.26
2018-03-22,172.68,168.6
2018-03-23,169.92,164.94
2018-03-26,173.1,166.44
2018-03-27,175.15,166.92
</pre>
Highcharts.stockChart('chart-container', {
...,
data: {
csv: document.getElementById('csv').innerHTML,
complete: function(options) {
const processedFlagData = {
low: [],
hight: [],
none: []
};
const flagData = options.series[2].data.filter(
dataEl => dataEl[1]
);
const positions = options.series[3].data.filter(
dataEl => dataEl[1]
);
flagData.forEach(dataEl => {
const matchedPos = positions.find(pos => pos[0] === dataEl[0]);
if (!matchedPos) {
processedFlagData.none.push(dataEl);
} else if (matchedPos[1] === 1) {
processedFlagData.low.push(dataEl);
} else if (matchedPos[1] === 2) {
processedFlagData.hight.push(dataEl);
}
});
options.series[2].data = processedFlagData.none;
options.series[3].name = 'flag on low';
options.series[3].data = processedFlagData.low;
options.series[4] = {
name: 'flag on high'
};
options.series[4].data = processedFlagData.hight;
}
},
legend: {
enabled: true
},
series: [{
id: 'high'
}, {
id: 'low'
}, {
type: 'flags',
keys: ['x', 'title']
}, {
type: 'flags',
keys: ['x', 'title'],
onSeries: 'high'
}, {
type: 'flags',
keys: ['x', 'title'],
onSeries: 'low'
}]
});
有五个csv列和五个系列项(两个csv数据和三个标志)。options.series 2、options.series 3和options.series 4如何显式Map到csv列和/或series项?在编写自定义代码时,我不知道索引值2、3和4是从哪里来的!
我试图写JavaScript,使一个或多个指标,在csv列标题中添加,而不破坏渲染的标志。当我从上面的例子中编写派生代码时,它呈现的只是一个空白的图表或三个没有标志的数据行!
date,indicator,adj_high,adj_low,flag,pos
2018-02-27,190,180.48,178.16,flag1,0
2018-02-28,190,180.615,178.05,NaN,NaN
2018-03-01,190,179.775,172.66
2018-03-02,188,176.3,172.45
2018-03-05,185,177.74,174.52
2018-03-06,187,178.25,176.13
2018-03-07,182,175.85,174.27
2018-03-08,184,177.12,175.07
2018-03-09,185,180.0,177.39
2018-03-12,187,182.39,180.21,Flag2,1
2018-03-13,190,183.5,179.24
2018-03-14,185,180.52,177.81
2018-03-15,185,180.24,178.0701
2018-03-16,188,179.12,177.62
2018-03-19,183,177.47,173.66,Flag3,2
2018-03-20,182,176.8,174.94
2018-03-21,180,175.09,171.26
2018-03-22,178,172.68,168.6
2018-03-23,175,169.92,164.94
2018-03-26,179,173.1,166.44
2018-03-27,185,175.15,166.92
进一步研究-语法错误!
series: [{
color: '#000000', <!-- black -->
lineColor: '#000000',
lineWidth: 2
}, {
id: 'high',
color: '#0000FF', <!-- blue -->
lineColor: '#0000FF',
lineWidth: 2
}, {
id: 'low',
color: '#A9A9A9', <!-- gray -->
lineColor: '#A9A9A9',
lineWidth: 2
}, {
type: 'flags',
keys: ['x', 'title']
}, {
type: 'flags',
keys: ['x', 'title'],
onSeries: 'high'
}, {
type: 'flags',
keys: ['x', 'title'],
onSeries: 'low'
}]
});
</script>
</body>
</html>
当我将索引数字从2-4增加1到3-5时,图表正确呈现,并且当我修复了JavaScript中的语法错误时。
1条答案
按热度按时间pxyaymoc1#
默认情况下,第一列被视为所有系列中数据的
x
值,每隔一列定义下一个系列的y
值。例如,这样的行:
2018-02-27,180.48,178.16,flag1,0
将转换为:complete
回调中的过滤器用于为没有数据的行清除未定义的值。密码:https://www.highcharts.com/docs/working-with-data/data-module
API引用:https://api.highcharts.com/highcharts/data.seriesMapping