Question

我有两个堆叠的柱状图。两者均在

下面提供

两者都包含具有相同列数的非常相似的数据。

两者都具有完全相同的初始化代码，数据是它们之间的唯一区别。

chart: { renderTo:'hcweeklySnapshotLoc_container', animation: { animation: true }, defaultSeriesType: 'column', height: 500, marginBottom: 140, zoomType: 'x' }, 
    credits: { enabled: false }, 
    plotOptions: { column: { dataLabels: { enabled: true }, stacking: 'normal' }, line: { lineWidth: 1, marker: { enabled: false, states: { hover: { enabled: true } } } }, series: { pointInterval: 7 }, spline: { lineWidth: 3, marker: { enabled: false, states: { hover: { enabled: true } } } } }, 
    title: { text: 'Location 3', x: -20 }, 
    tooltip: { formatter: function() { if(this.series.name == 'Target'|| this.series.name == 'Stretch' || this.series.name == 'Failure') { return '<b>'+ this.series.name +'</b><br/>' + Highcharts.dateFormat('%e %B %Y', this.x) +': <b>'+ this.y + '</b>' } else { return '<b>'+ this.series.name +'</b>' +'<br/>' + 'Week Ending :' + Highcharts.dateFormat('%e %B %Y', this.x) +': '+ this.y +'<br/>' + 'Total: '+ Math.round(this.point.stackTotal*Math.pow(10,2))/Math.pow(10,2);} } }, 
    xAxis: { dateTimeLabelFormats: { month: '%b %Y' }, minRange: 86400000, startOfWeek: 5, tickInterval: 604800000, tickmarkPlacement: 'on', title: { text: 'Week ending' }, type: 'datetime' }, 
    yAxis: { allowDecimals: false, min: 0, title: { text: 'Number of People' } }

其他位置（位置1和位置2）也面临与所有位置图表相同的问题。

我的问题是，所有位置图表在结尾处显示额外的日期刻度，而位置3图表则没有。这是Highcharts中的一些错误，还是我的数据存在问题。我正在使用MVC4 / Razor使用Highchart.Net生成高级图表

Answer 1

发生这种情况的原因是因为你的系列并非全部按升序排列。两个图表都是如此。 All Locations看起来更糟糕的原因是它在如何渲染图表方面有不同的猜测。如果按时间顺序列出时间序列，那么你应该很高兴。请参阅this示例。

您的代码：

{
            data: [
                [Date.parse('05/31/2013 00:00:00'), 1],
                [Date.parse('03/15/2013 00:00:00'), 3],
                [Date.parse('05/03/2013 00:00:00'), 2],
                [Date.parse('04/26/2013 00:00:00'), 3],
                [Date.parse('03/29/2013 00:00:00'), 2],
                [Date.parse('04/05/2013 00:00:00'), 1],
                [Date.parse('03/22/2013 00:00:00'), 4],
                [Date.parse('04/19/2013 00:00:00'), 6],
                [Date.parse('05/17/2013 00:00:00'), 4],
                [Date.parse('04/12/2013 00:00:00'), 1],
                [Date.parse('05/24/2013 00:00:00'), 4],
                [Date.parse('05/10/2013 00:00:00'), 1]
            ],
            name: 'Loc3',
            type: 'column',
            color: '#003E69',
            lineWidth: 1,
            pointInterval: 7
        }

按时间顺序排列的代码：

{
            data: [
                [Date.parse('03/15/2013 00:00:00'), 3],
                [Date.parse('03/22/2013 00:00:00'), 4],
                [Date.parse('03/29/2013 00:00:00'), 2],
                [Date.parse('04/05/2013 00:00:00'), 1],
                [Date.parse('04/12/2013 00:00:00'), 1],
                [Date.parse('04/19/2013 00:00:00'), 6],
                [Date.parse('04/26/2013 00:00:00'), 3],
                [Date.parse('05/03/2013 00:00:00'), 2],
                [Date.parse('05/10/2013 00:00:00'), 1],
                [Date.parse('05/17/2013 00:00:00'), 4],
                [Date.parse('05/24/2013 00:00:00'), 4],
                [Date.parse('05/31/2013 00:00:00'), 1]
            ],
            name: 'Loc3',
            type: 'column',
            color: '#003E69',
            lineWidth: 1,
            pointInterval: 7
        }

Highchart：xaxis随机添加额外日期

1 个答案: