2014-06-25 41 views
0

伙计们我有一个简单的高图表,它显示了每天解决的问题数量和问题数量。图表的开始日期是从当前日期起约30天。所以它会每30天显示一次数据。Highcharts如果只有x轴的值大于0才会绘图?

现在我想做的是动态启动图表从那里在x轴的数据大于0

例如,如果29天的问题/解决计数为0,并在第30天的问题计数增加到1,我想从第30天开始,等等。

这是我的图表

$('#performance-cart').highcharts({ 
    chart: { 
     type: 'area', backgroundColor: '#f5f7f7', style: { fontFamily: 'Roboto, Sans-serif', color: '#aeafb1' }, 
     animation: { 
      duration: 1500, 
      easing: 'easeOutBounce' 
     } 
    }, 
    xAxis: { 
     type: 'datetime', 
     labels: { style: { color: '#aeafb1' } } 
    }, 
    yAxis: { 
     min: 0, max: maxVal, tickInterval: 10, gridLineColor: '#ebeded', gridLineWidth: 1, 
     title: { text: '' }, lineWidth: 0, labels: { align: 'right', style: { color: '#aeafb1' } } 
    }, 
    title: { text: '' }, 
    tooltip: { 
     useHTML: true, headerFormat: '<h3 style="color:#ffffff;font-weight:300;padding: 3px 12px;">{point.y:,.1f}</br>', 
     backgroundColor: '#515757', pointFormat: 'Issues</h3>'//$('#performanceColumnChart').data('tooltip') 
    }, 
    legend: { 
     itemStyle: { color: '#838589' }, symbolWidth: 12, symbolHeight: 5, itemWidth: 80, symbolRadius: 0, 
     itemMarginBottom: 10, backgroundColor: '#f5f7f7', verticalAlign: 'top', borderWidth: 0, x: -498, y: 10 
    }, 
    plotOptions: { 
     area: { 
      fillOpacity: 0.2, cursor: 'pointer', marker: { 
       symbol: 'circle', fillColor: '#FFFFFF', lineWidth: 2, lineColor: null, 
       allowPointSelect: true 
      } 
     }, 
     line: { 
      fillOpacity: 0.2, cursor: 'pointer', marker: { 
       symbol: 'circle', fillColor: '#FFFFFF', lineWidth: 2, lineColor: null, 
       allowPointSelect: true 
      } 
     }, 
     column: { 
      fillOpacity: 0.2, cursor: 'pointer', marker: { 
       symbol: 'circle', fillColor: '#FFFFFF', lineWidth: 2, lineColor: null, 
       allowPointSelect: true 
      } 
     }, 
     series: { 
      pointStart: myDateVariable, 
      pointInterval: 24 * 3600 * 1000 // one day 
     } 
    }, 
    series: [{ 
     name: 'Issues', color: '#ff3806', 
     data: myIssueData, 
     marker: { states: { hover: { fillColor: '#ff3806', lineColor: '#ffffff', lineWidth: 2 } } } 
    }, { 
     name: 'Resolved', color: '#1da9dd', 
     data: myResolvedData, 
     marker: { states: { hover: { fillColor: '#1da9dd', lineColor: '#ffffff', lineWidth: 2 } } } 
    }] 
}); 

的代码是这种做法甚至可能吗?如果是这样,我想要一些指针。我搜查了高图官方文件,但无法得到任何帮助。

+0

您可以在预处理过程中调整数据,换句话说,在将其添加到高图之前,解析它并摆脱不正确的点。 –

回答

1

最简单的方法是预处理您的数据,以便myIssueData符合您的要求。您尚未说明您使用什么来生成数据,因此答案取决于您的数据源。对于基于SQL的您可以查询最近的非0发布日期,然后将该日期用作查询的起点。伪代码:

DECLARE @startDate AS datetime 

SELECT @startDate = MAX(date) 
FROM myIssuesTable 
WHERE issueCountColumn > 0 

SELECT date, issueCountColumn 
FROM myIssuesTable 
WHERE date >= @startDate 
ORDER BY date ASC 

第二个查询的结果成为您的myIssueData。这不包括问题计数超过30天超过30天的情况,但您可以在此情况下跳过此查询,并在距离今天30天前使用直接查询date

+0

这也可以工作,但我的方法有点不同。我通过从x轴上绘制的数据阵列中删除前导零来在客户端完成了所有这些工作。 – NewbieProgrammer