Highstocks：如何定义行的跨度颜色而不是单个行颜色

我正在使用Highstocks（比较多个系列）创建甘特图。 1.我想要第一个span颜色是红色，第二个蓝色和第三个绿色。我该怎么办？ 2.如何设置工具提示以显示当前所有点的值，而不是当时的所有点。 3.如何修复y轴，它应该随着值的增加而添加滚动。Highstocks：如何定义行的跨度颜色而不是单个行颜色

请检查甘特图小提琴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 
        } 

       }); 
      } 
     }); 
     });

来源

2013-12-13 norbdum

1）您只能为系列设置一种颜色。在这里：

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

2）在提示，您通过this.points[0].series.data等有机会获得一系列所以，你可以得到所有的点。

3）不支持滚动。

来源

2013-12-13 10:47:32

我尝试通过'tooltip访问系列：{pointFormat：'{series.name}：{this.points [0] .series.data}
'，..}'链接是[jsfiddle]（ http://jsfiddle.net/jbeXU/）但它不工作，我做对了吗？ – norbdum

使用'tooltip.formatter'，而不是'tooltip.format'。 –

感谢它的工作....另一个问题：Highstocks不支持在Y轴上滚动。在高层图中可能吗？如果是，你可以引用一些参考。 – norbdum

Highstocks：如何定义行的跨度颜色而不是单个行颜色

回答

相关问题