結合2個系列在一張圖表（不是堆積）

我想在一個圖表中結合2個單獨的系列，我正在使用Highcharts。在如圖所示的要求寫入了附加的圖片我試過選項，如圖http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/column-grouping-false/結合2個系列在一張圖表（不是堆積）

$(function() { 

// First, let's make the colors transparent 
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) { 
    return Highcharts.Color(color) 
     .setOpacity(0.5) 
     .get('rgba'); 
}); 

$('#container').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Monthly Average Rainfall' 
    }, 
    subtitle: { 
     text: 'Source: WorldClimate.com' 
    }, 
    xAxis: { 
     categories: [ 
      'Jan', 
      'Feb', 
      'Mar', 
      'Apr', 
      'May', 
      'Jun', 
      'Jul', 
      'Aug', 
      'Sep', 
      'Oct', 
      'Nov', 
      'Dec' 
     ] 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'Rainfall (mm)' 
     } 
    }, 
    legend: { 
     layout: 'vertical', 
     backgroundColor: '#FFFFFF', 
     align: 'left', 
     verticalAlign: 'top', 
     x: 100, 
     y: 70, 
     floating: true, 
     shadow: true 
    }, 
    tooltip: { 
     shared: true, 
     valueSuffix: ' mm' 
    }, 
    plotOptions: { 
     column: { 
      grouping: false, 
      shadow: false 
     } 
    }, 
    series: [{ 
     name: 'Tokyo', 
     data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
     pointPadding: 0 

    }, { 
     name: 'New York', 
     data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3], 
     pointPadding: 0.1 

    }, { 
     name: 'London', 
     data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2], 
     pointPadding: 0.2 

    }, { 
     name: 'Berlin', 
     data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1], 
     pointPadding: 0.3 

    }] 
}); 
});

我已經嘗試了其他選擇，但不能達到solution.My問題是：我們能否在所有獲得此功能高圖？

謝謝。 enter image description here

來源

2015-02-10 Anirban

也許你可以設置分組「真」，然後移動用pointPlacement列，所以兩個是重疊的，這樣的事情： [的jsfiddle（HTTP：/ /jsfiddle.net/ygbLmv4q/） – 2015-02-10 08:22:29

由於其他人正在研究答案，我將拋出強制性評論，認爲這是顯示數據的一種非常糟糕的方式。所有關於設置的工作都是爲了混淆信息而不是理解它。如果不知道顯示器的全部用途，很難說最好的解決方案是什麼，但它幾乎肯定涉及兩張獨立的圖表，而不是將所有東西都拼合成一個。 FWIW – jlbriggs 2015-02-10 16:11:35

@jlbriggs你是對的。我嘗試了一切反對它，但產品的人很高興看到一個更復雜的看法，而不是一個簡單的看法:) – Anirban 2015-02-11 00:59:20

就像igoel說的那樣，玩分組和pointPlacement就夠了。

不幸的是，圖例不支持系列分組，因此您必須使用labelFormatter將其格式化爲一個小例子。

legend: { 
    layout: 'horizontal', 
    backgroundColor: '#FFFFFF', 
    floating: true, 
    align: 'left', 
    verticalAlign: 'top', 
    x: 90, 
    y: 45, 
    title: { text: 'Total Pieces' }, 
    labelFormatter: function() {     
     return this._i < 3 ? this.name + ' per hour (thousands)' : this.name + ' per month (millions)'; 
    }

事情是這樣的jsfiddle：http://jsfiddle.net/e8aydv3h/1/

來源

2015-02-10 09:26:43 charlie

感謝您的幫助。我的問題是有什麼辦法可以概括「pointPlacement」邏輯。我只會知道我需要繪製哪些列以及將要返回的網站。另外，我爲SITE1選擇的顏色爲千色，對於MILLION對應色塊，需要考慮較淺的色調。 – Anirban 2015-02-10 15:13:39

對於顏色 - 您還可以使用'rgba（r，g，b，a）'作爲顏色。對於「pointPlacement」，您可以從API開始 - http://api.highcharts.com/highcharts#plotOptions.series.pointPlacement並查看代碼以獲取更多信息 - http://code.highcharts.com/highcharts.src.js – 2015-02-10 16:27:31

結合2個系列在一張圖表（不是堆積）

回答

相關問題