Javascript Highcharts如何仅在x轴的值大于0时打印?

Javascript Highcharts如何仅在x轴的值大于0时打印?,javascript,charts,highcharts,Javascript,Charts,Highcharts,伙计们,我有一个简单的图表,显示每天的问题数量和解决的问题数量。图表的开始日期是从当前日期算起的-30天。因此,它将始终每30天显示一次数据 现在我要做的是从x轴上的数据大于0的位置动态启动图表 例如,如果29天的问题/解决计数为0,并且在第30天问题计数提升为1,则我希望从第30天开始绘制图表,依此类推 这是我的图表的代码 $('#performance-cart').highcharts({ chart: { type: 'area', backgroundColor

伙计们,我有一个简单的图表,显示每天的问题数量和解决的问题数量。图表的开始日期是从当前日期算起的-30天。因此,它将始终每30天显示一次数据

现在我要做的是从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 } } }
    }]
}); 
$(“#性能购物车”)。高图({
图表:{
键入:“区域”,背景颜色:“#f5f7f7”,样式:{fontFamily:“Roboto,无衬线”,颜色:“#aeafb1”,
动画:{
持续时间:1500,
放松:“放松弹跳”
}
},
xAxis:{
键入:“日期时间”,
标签:{style:{color:'#aeafb1'}}
},
亚克斯:{
最小值:0,最大值:maxVal,间隔时间:10,网格线颜色:'#ebed',网格线宽度:1,
标题:{text:'},线宽:0,标签:{align:'right',样式:{color:'#aeafb1'}
},
标题:{文本:'},
工具提示:{
useHTML:true,headerFormat:“{point.y:,.1f}
”, 背景颜色:'#515757',点格式:'问题'/$('#性能柱状图')。数据('工具提示') }, 图例:{ itemStyle:{color:'#838589'},symbolWidth:12,symbolHeight:5,itemWidth:80,symbolRadius:0, itemMarginBottom:10,背景颜色:'#f5f7f7',垂直对齐:“顶部”,边框宽度:0,x:-498,y:10 }, 打印选项:{ 面积:{ fillOpacity:0.2,光标:“指针”,标记:{ 符号:“圆”,填充颜色:“#FFFFFF”,线宽:2,线颜色:空, allowPointSelect:true } }, 行:{ fillOpacity:0.2,光标:“指针”,标记:{ 符号:“圆”,填充颜色:“#FFFFFF”,线宽:2,线颜色:空, allowPointSelect:true } }, 专栏:{ fillOpacity:0.2,光标:“指针”,标记:{ 符号:“圆”,填充颜色:“#FFFFFF”,线宽:2,线颜色:空, allowPointSelect:true } }, 系列:{ pointStart:myDateVariable, 点间隔:24*3600*1000//一天 } }, 系列:[{ 名称:“问题”,颜色:“#ff3806”, 数据:myIssueData, 标记:{状态:{悬停:{填充颜色:'#ff3806',线条颜色:'#ffffff',线条宽度:2}}} }, { 名称:“已解决”,颜色:“1da9dd”, 数据:Myddata, 标记:{状态:{悬停:{填充颜色:'#1da9dd',线条颜色:'#ffffff',线条宽度:2}}} }] });

这种方法可能吗?如果是的话,我想要一些指针。我已经搜索了high charts的官方文档,但无法从中获得任何帮助

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

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
。这不适用于问题计数超过0超过30天的情况,但在这种情况下,您可以跳过此查询,直接查询从今天开始的30天前的日期。

您可以在预处理中调整数据,换句话说,在将数据添加到highcharts之前,解析它并去掉不正确的点。这也可以奏效,但我的方法有点不同。我在客户端通过从绘制在x轴上的数据数组中删除前导零来完成所有这一切。