Question

如果点数超过特定限制，是否还要切断图表线？

我的意思是，如果没有特定时间跨度的数据，我想切断图表。

enter image description here

在上图中，我想切断那张图表。

我在.net中使用DotNet.Highcharts实现highcharts，但是我可以在这里发布生成的javascript代码：

$(document).ready(function() {
Chart = new Highcharts.Chart({
    chart: { renderTo:'Chart_container', className: 'chart', defaultSeriesType: 'line', marginBottom: 55, marginRight: 130, zoomType: 'xy' }, 
    legend: { align: 'left', backgroundColor: '#FFFFFF', layout: 'vertical', verticalAlign: 'top', x: 20, y: 80 }, 
    plotOptions: { area: { lineWidth: 1, marker: { enabled: false, states: { hover: { enabled: true, radius: 5 } } }, shadow: false, zIndex: 2 }, line: { allowPointSelect: true, dashStyle: 'solid', lineWidth: 1, marker: { enabled: false } }, spline: { marker: { enabled: false }, zIndex: 1000 } }, 
    subtitle: { text: 'My chart', x: -20 }, 
    title: { text: 'My Chart' }, 
    xAxis: { gridLineWidth: 1, labels: { align: 'left', x: 3, y: -3 }, title: { text: 'My Chart' }, type: 'datetime' }, 
    yAxis: { labels: { formatter: function() { return this.value ; } }, title: { text: 'Battery Voltage (V)' } }, 
    series: [{ data: [['21/06/1392 09:02:32', 19.83], ['21/06/1392 11:02:32', 21.17], ['21/06/1392 13:02:31', 13.89], ['21/06/1392 15:02:31', 15.23]], name: 'Battery Voltage', type: 'line' }]
});

}）;

Answer 1

也许如果为这些数据点插入空值并确保将connectNulls设置为false。

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-connectnulls-false/

$(function () {
    $('#container').highcharts({

        chart: {
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                // connectNulls: false // by default
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, null, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]

    });
});

Answer 2

好吧，我想出了如何解决它，

在我的特定情况下，我必须检查两个dataPoints之间的时间跨度是否超过例如“2小时”，然后我会在这些点之间添加一个DataPoint并将其值设置为Null。

由于我使用的是DotNet.Highcharts，因此使用我的MVC控制器逻辑执行这些步骤。

 //dtValuesGrouped is a List of Type <DataValue> which is my Data Container class.

 SortedDictionary<string, double?> sortedDict = new SortedDictionary<string, double?>();
    if (dtValues[j + 1].DateTime - dtValues[j].DateTime> TimeSpan.FromHours(2))
    {
        sortedDict.Add(
            (dtValuesGrouped[j].DateTime+ TimeSpan.FromHours(1.5)),
            null);
    }
    sortedDict.Add(
            dtValuesGrouped[j].DateTime,
            dtValuesGrouped[j.Value);

 // and I will finally convert the sortedDictionary to an array of object[,] and set it to Chart.Serries.Data

如何在两点之间的高位图中切断线

2 个答案: