Question

我和这个人一直在一起，我似乎无法回答。

除了XAxis作为底部之外，我基本上完成了我所需要的一切 - 这是一个时间线图表，我无法让它完全呈现日期。（对于交付行的每个数据点，我有一个sql datatime条目。）

我尝试了各种选项，UTC，转换为毫秒等但无济于事。谁能告诉我如何推进这个？

我的目标是拥有一个可以在几分钟内显示的图表（最多2个小时值= 160个点）并自动缩放到小时和天数（如果需要） - 如果可能的话。

我目前的设置如下：

（asp.net / vb.net / SQL） - 虽然我很高兴收到c＃help，但我会转换）

标记：

<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字段 - 但是如何将其传递给另一个。

有人可以提供建议吗？

非常感谢您的帮助。

彼得

Answer 1

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

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

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

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

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

如果这没有帮助，请澄清并添加数据输出样本。

Highcharts时间轴xAxis

1 个答案: