1

我一直在玩这个,我似乎无法回答。

除了 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 字段 - 但是如何将它与另一个传递。

任何人都可以建议吗?

非常感谢您的帮助。

彼得

4

1 回答 1

2

用小提琴或函数产生的数据示例会更容易回答。

您需要做的一件事:删除 'tickInterval:20' - 这是告诉图表每 20 毫秒添加一个标签。

接下来,确保您的数据结构正确。

应该看起来像data:[[timestamp, numeric value],[timestamp,numerica value],[timestamp,numerica value]...]

或者,如果您的时间戳是固定间隔的,您可以设置 pointStart 和 pointInterval 属性,并跳过在数据数组中提供时间戳值,这样您就只有data:[y value, yvalue, yvalue...]

如果这没有帮助,请澄清并添加数据输出示例。

于 2013-08-26T20:22:33.653 回答