Charts 海克斯

我对这个问题反复讨论，似乎找不到答案

我基本上已经做了所有我需要的，除了底部的XAxis——这是一个时间线图，我根本无法让它呈现日期。（对于交付行的每个数据点，我都有一个sql datatime条目）

我尝试过各种选项，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>

正如您所看到的，我已经在sql中设置了campTableTimeStamp字段，但是如何将它与其他字段一起传递

有人能提供建议吗

非常感谢您的帮助

---

Peter

这将更容易用小提琴回答，或者用函数产生的数据示例回答

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

接下来，确保数据结构正确

应该看起来像

数据：[[timestamp，numeric value]，[timestamp，numerica value]，[timestamp，numerica value]…]

或者，如果时间戳以固定的间隔出现，则可以设置pointStart和pointInterval属性，并跳过在数据数组中提供时间戳值，这样您将只有

数据：[y值，yvalue，yvalue…]

---

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

感谢您的回答-我非常感谢您抽出时间。我会继续修改和采纳建议。

       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)