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：如何定義行的跨度顏色而不是單個行顏色

回答

相關問題