javascript - 高库存 : How to define the span colors of a line instead of the individual line color

Question

我正在使用 Highstocks 创建甘特图(比较多个系列)。1.我希望第一个跨度颜色为红色，第二个跨度颜色为蓝色，第三个跨度颜色为绿色。我怎样才能做同样的事情？2.如何设置工具提示以显示线上所有点的值而不是当时所有点的值。3. 如何修复y轴并随着值的增加添加滚动。

请检查甘特图 fiddle here .

var partNumber="2724070125R Planned,2724070125RActual,5511822432R Planned,5511822432RActual";
    var partNum = partNumber.split(",");
var ganttData = [
[[Date.UTC(2013,11-1,07),1], [Date.UTC(2013,11-1,29),1], [Date.UTC(2013,11-1,30),1]],
 [[Date.UTC(2013,11-1,20),1.25],Date.UTC(2013,11-1,21),1.25],Date.UTC(2013,12-1,21),1.25]],
[[Date.UTC(2013,11-1,13),2],[Date.UTC(2013,12-1,10),2],[Date.UTC(2014,02-1,14),2]],
[[Date.UTC(2013,11-1,21),2.25],[Date.UTC(2013,11-1,21),2.25],[Date.UTC(2013,11-1,30),2.25]]];
$( document ).ready(function(){
        $(function() {
            var seriesOptions = [],
                yAxisOptions = [],
                seriesCounter = 0,
                names = partNum,
                colors = Highcharts.getOptions().colors;          
                   var data=ganttData;                         
             $(function () {                     
             $.each(names, function(i, name) {
                      seriesOptions[i] = {

                       // name: data[i][1],
                         name:name,
                         step:true,
                        data: data[i]                         
                    };

                    // As we're loading the data asynchronously, we don't know what order it will arrive. So
                    // we keep a counter and create the chart when all the data is loaded.
                    seriesCounter++;

                    if (seriesCounter == names.length) {
                        createChart();
                    }
                });
            });

            // create the chart when all data is loaded
            function createChart() {
                Highcharts.setOptions({

                    global: {
                        useUTC: false
                    }
                });

               $('#ganttChart').highcharts('StockChart', {
                    chart: {
                    },
                    title: {
            text: 'PPAP Cumulative Status'
        },

                    rangeSelector: {
                        selected: 4
                    },
                    xAxis: {
                        type: 'datetime',                            ordinal: false //this sets the fixed time formats

                    },
                    yAxis: {

                        plotLines: [{
                            value: 0,
                            width: 2,
                            color: 'silver'
                        }],
               min:0                     },

                    plotOptions: {
                   series: {
                                lineWidth: 3,
                                states: {
                                    hover: {
                                        enabled: true,
                                        lineWidth: 3
                                    }
                                }
                            }
                    },

                    tooltip: {

                        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
                        valueDecimals: 0
                    },

                    series: seriesOptions,
                    exporting: {
                        enabled: false
                    }

                });
            }
        });
        });

Answer 1

1) 您只能为系列设置一种颜色。这里:

         $.each(names, function(i, name) {
                  seriesOptions[i] = {
                     name: name,
                     step: true,
                     data: data[i],
                     color: 'yourColor'                        
                   };
         ...
         });

2) 在工具提示中，您可以通过 this.points[0].series.data 等访问系列。这样您就可以获得所有积分。

3) 不支持滚动。