0

我有两个堆积柱形图。两者都在下面提供

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

所有位置 jsfiddle

位置 3 jsfiddle

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

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）也面临与所有位置图相同的问题。

我的问题是 All Location 图表在末尾显示了一个额外的日期刻度，而 Location 3 图表没有。这是 Highcharts 中的一些错误还是我的数据有问题。我正在使用 MVC4/Razor 使用 Highchart.Net 生成 highcharts

4

1 回答 1

1

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

你的代码：

{
            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
        }
于 2013-05-28T13:01:37.367 回答