具有日期

Question

我正在尝试显示项目的详细信息。 我想在条形图上显示完成百分比，每个项目的开始日期为折线图。

现在，为了达到这个目的，我创建了一个双y轴图表。
1 - 轴-1显示条形图的进度
2 - 轴-2应该用折线图显示开始日期

条形图工作正常。即使折线图在没有双轴的情况下也能正常工作。但是，当我将它们加在一起时，折线图消失了。我尝试在折线图上更改随机数字的日期 - 这也有效。
任何人都知道如何使日期在双轴图表上工作。
jsfiddle

var projectDetails = 
    [{
        "name": "+PS8039",
        "startDate": "2016-02-01",
        "finishDate": "2016-04-01"
    }, {
        "name": "+PS8039",
        "startDate": "2016-01-02",
        "finishDate": "2016-08-02"
    }, {
        "name": "+PS8039",
        "startDate": "2016-03-08",
        "finishDate": "2016-08-08"
    }, {
        "name": "+PS8039",
        "startDate": "2016-04-11",
        "finishDate": "2016-09-11"
    }, {
        "name": "+PS8039",
        "startDate": "2016-05-13",
        "finishDate": "2016-12-13"
    }, {
        "name": "+PS8039",
        "startDate": "2016-01-15",
        "finishDate": "2016-04-15"
    }, {
        "name": "+PS8039",
        "startDate": "2016-02-25",
        "finishDate": "2016-08-25"
    }, {
        "name": "+PS8039",
        "startDate": "2016-03-03",
        "finishDate": "2016-07-03"
    }, {
        "name": "+PC2E",
        "startDate": "2016-04-07",
        "finishDate": "2016-05-31"
    }, {
        "name": "+PC2E",
        "startDate": "2016-05-16",
        "finishDate": "2016-09-01"
    }];

$(function () {
    var xCategories = new Array();
    var completionpercent  = new Array();
    var startdates = new Array();
    var finishdates = new Array();

    for(var i = 0; i< projectDetails.length; i++){
        xCategories[i] = projectDetails[i].name;
        startdates[i] = moment(projectDetails[i].startDate).format('x');
        finishdates[i] = projectDetails[i].finishDate;

        completionpercent[i] =  ((Date.now() - Date.parse(projectDetails[i].startDate))
                                 /(Date.parse(projectDetails[i].finishDate) - Date.parse(projectDetails[i].startDate)))
                                *100 ;          

    }

    $('#Chart').highcharts({
        colors: ['#2C5898'],
        title: {
            text: 'Project Completion'
        },
        legend: {
            enabled: false
        },
        xAxis: [{
            categories: xCategories,
        crosshair: true
        }],
        yAxis:[{
            title: {
                text: '% Completion'            
            },
            max: 110
        },
               {
                   "title": {
                "text": "Start Dates"
            },
            opposite: true
               }
        ],
        plotOptions: {
            bar: {
                groupPadding: 0,
                zones: [{
                    value: 100
                },{
                    color: {
                            linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                            stops: [
                                [0, '#cc0000'],
                                [1, '#ff8080']
                            ]
                        }
                }]
            }
        },
        credits: {
            enabled: false
        },
        series: [{
        name: 'Start Dates',
        type: 'line',
        data: startdates
        },{
            name: 'Completion %',
            type: 'bar',
            data: completionpercent
        }]
    });
});

Answer 1

您需要指定线系列与第二轴相关：

yAxis: 1,

更新了小提琴：

• https://jsfiddle.net/jlbriggs/4e6edy7t/2/