highcharts 显示完成百分比答案

【问题标题】：highcharts display percentage completehighcharts 显示完成百分比
【发布时间】：2013-06-20 20:23:56
【问题描述】：

我正在尝试使用 highcharts 在 php 中创建图表。我想制作一个条形图显示项目 startdate - endate 显示完成百分比。我有所有 3 个来自数据库的值。如果项目落后于进度条，我想在图表上显示的第四个值（如果可能）使用当前日期，并在栏中显示阴影。

以下是我所拥有的

var date = new Date();

//console.log(date.getFullYear() + " " + (date.getMonth()+1) + " " + date.getDay() );

$('#container').highcharts({
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Snow depth in the Vikjafjellet mountain, Norway'
    },
    subtitle: {
        text: 'An example of irregular time data in Highcharts JS'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%e. %b',
            year: '%b'
        }
    },
    yAxis: {
        title: {
            text: 'Percent %'
        },
        min: 0,
        max: 100
    },
    tooltip: {
        formatter: function() {
            var start = new Date(2013,5,11),
             end = new Date(2013,11,11),
            today = new Date();
                return  Math.round(100-((end - start) * 100 ) / today) + '%' ;//'<b>'+ this.series.name +'</b><br/>'+ Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y +' m';
        }
    },

    series: [{
        name: 'Fastnet OffshWest Shetland',
        // Define the data points. All series have a dummy year
        // of 1970/71 in order to be compared on the same x axis. Note
        // that in JavaScript, months start at 0 for January, 1 for February etc.
        data: [
            [Date.UTC(2013,  5, 11), 0   ],
            [Date.UTC(date.getFullYear(), (date.getMonth()+1), date.getDay()), 30 ],
            [Date.UTC(2013, 11, 11), 100 ]
        ]
    }]
});

我一直在修改折线图。我想把它变成一个条形图，显示每个项目的开始日期结束日期。和当前完成的百分比。我还想计算并显示使用当前日期应该完成的预测百分比。

【问题讨论】：

您的问题是什么？当前的输出是多少，预期的输出是多少？
我已经更新了我的问题
我认为您需要提供一个示例图像来说明您希望图表的外观。

标签： php yii highcharts bar-chart

【解决方案1】：

据我了解，您需要条形图，在 yAxis 上显示实际百分比进度，在 xAxis 上显示开始 - 结束日期，如果是，这里是：http://jsfiddle.net/hbEsj/

使用柱状图，它允许您将数据传递为：[value, timestamp1, timestamp2]：

$('#container').highcharts({

    chart: {
        type: 'columnrange',
        inverted: true
    },
    xAxis: {
        min: -10,
        max : 110,
        tickInterval: 25,
        startOnTick: false,
        endOnTick: false,
        reversed: false
    },
    yAxis: {
        type: 'datetime'
    },
    plotOptions: {
        series: {
            pointWidth: 20
        }
    },
    series: [{
        name: 'Project 1',
        data: [
            [36, Date.UTC(2013,0,1),Date.UTC(2013,0,13)]
        ]
    }, {
        name: 'Project 2',
        data: [
            [66, Date.UTC(2013,0,1),Date.UTC(2013,0,10)]
        ]
    }, {
        name: 'Projec 3',
        data: [
            [100, Date.UTC(2013,0,1),Date.UTC(2013,0,3)]
        ]
    }]

});

但是，我不了解预测值和计算值的部分 - Highcharts 是一个显示数据的库，而不是预测任何东西。

【讨论】：