我一直在玩这个,我似乎无法回答。
除了 XAxis 作为底部之外,我基本上已经完成了所有我需要的工作 - 这是一个时间线图表,我根本无法让它呈现日期。(对于交付线的每个数据点,我都有一个 sql 数据时间条目)。
我尝试了各种选项,UTC,转换为毫秒等,但无济于事。谁能告诉我如何推进这个?
我的目标是拥有一个可以在几分钟内显示的图表(最多 2 小时价值 = 160 个点),并在需要时自动缩放到小时和天 - 如果可能的话)。
我目前的设置如下:
(asp.net / vb.net / SQL) - 虽然我很高兴收到 c# 帮助并且我会转换)
标记:
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
global: { useUTC: true } });
$('#container').highcharts({
chart: { type: 'spline' },
title: { text: 'Delivered vs CTR' },
subtitle: {text: 'Source: Campaign Name'},
xAxis: [{
type:'datetime',
tickInterval: 20,
dateTimeLabelFormats:{
hour: '%H:%M<br>%p',
minute: '%l%M<br>%p',
second: '%H:%M:%S'
}
}],
yAxis: [{ // Primary yAxis
max: 20,
labels: {
formatter: function () {
return this.value;
},
style: {
color: '#DE4527'
}
},
title: {
text: 'Clicked',
style: {
color: '#DE4527'
}
},
opposite: true
}, { // Secondary yAxis
lineWidth: 1,
gridLineWidth: 0,
title: {
text: 'Delivered',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function () {
return this.value ;
},
style: {
color: '#4572A7'
}
}
}],
tooltip: {
shared: true
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Delivered',
data: <%= DeliveredChartData%>,
color: '#4572A7',
lineWidth: 1,
yAxis: 1,
marker: { radius: 2, symbol:'circle'}
}, {
name: 'Clicked',
color: '#DE4527',
marker: { radius: 2},
data: <%= ClickedChartData%>,
}]
});
});
</script>
后面的代码:
Dim dt As DataTable = dsAreaChart.Tables(0)
Dim _dataDelivered As New List(Of Integer)()
Dim _dataClicked As New List(Of Integer)()
Dim sb As New StringBuilder
For Each row As DataRow In dt.Rows
Dim tmil As DateTime = CDate(row("campTableTimeStamp"))
'need to somehow add campTableTimeStamp as XAxis timeline
_dataDelivered.Add(CInt(row("campQtyDelivered")))
_dataClicked.Add(CInt(row("campQtyClicked")))
Next
Dim jss As New JavaScriptSerializer()
DeliveredChartData = jss.Serialize(_dataDelivered)
ClickedChartData = jss.Serialize(_dataClicked)
如您所见,我已经在 sql 中有 campTableTimeStamp 字段 - 但是如何将它与另一个传递。
任何人都可以建议吗?
非常感谢您的帮助。
彼得