highcharts configuration

Question

我想buidl通過highcharts確切這種類型的圖。

請按照鏈接 - like this graph

我已經建立的東西 - mygraph

但我需要用不同的顏色和x軸標籤將顯示在懸停填充整個列。

$(function() { 
 
    var chart = new Highcharts.Chart({ 
 
    chart: { 
 
     renderTo: 'container', 
 
     type: 'column', 
 
     height: 400, 
 
    }, 
 
    plotOptions: { 
 
     column: { 
 
     stacking: 'normal' 
 
     } 
 
    }, 
 
    tooltip: { 
 
     //xDateFormat: '%Y-%m-%d', 
 
     formatter: function() { 
 
     return "Click to see all coverage from - " + Highcharts.dateFormat("%b %d", this.x) 
 
     }, 
 
     positioner: function(boxWidth, boxHeight, point) { 
 
     return { 
 
      x: point.plotX, 
 
      y: point.plotY 
 
     }; 
 
     }, 
 
    }, 
 
    xAxis: { 
 
     gridLineWidth: 0, 
 
     type: 'datetime', 
 
     dateTimeLabelFormats: { 
 
     day: ' %b %e, %Y' 
 
     } 
 
    }, 
 
    yAxis: { 
 
     gridLineWidth: 1, 
 
     title: { 
 
     text: '' 
 
     }, 
 
     labels: { 
 
     enabled: true 
 
     } 
 
    }, 
 
    legend: { 
 
     enabled: false 
 
    }, 
 

 
    series: [{ 
 
     data: [50, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
 
     pointStart: Date.UTC(2010, 0, 1), 
 
     pointInterval: 24 * 3600 * 1000 // one day 
 
    }], 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 

 
<div id="container" style="height: 400px; width: 500px"></div>

Answer 1

您正在尋找禁用x軸標籤並更改系列彩色。

您可以通過

xAxis: { 
    labels: { 
       enabled:false 
      } 
     } 

禁用X軸值有在Highcharts設置顏色的超過1分的方式。一種方法是通過指定顏色串聯。

series: [{ 
     data: [50, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
     pointStart: Date.UTC(2010, 0, 1), 
     pointInterval: 24 * 3600 * 1000 ,// one day, 
     color:"#33333" 
    }] 

JSFiddle Demo

Answer 2

只是爲了好玩，原因是老題材，但很有趣。

選項一可能會創建一個堆疊的柱形圖和禁用工具提示系列之一...不是一個很好的，哈哈（請不要這樣做）。一個更好的解決方案和足夠接近的方法，將爲每個點創建plotLines。

第一個問題是我們需要創建儘可能多的plotLines作爲列。因此，我們不會在選項中執行此操作，而是在繪製圖表後檢查系列數據長度。

chart.series[0].data.length 

第二個問題是，我們必須設置情節主線的寬度，所以我們應該以設定的情節主線寬度爲我們列前檢查列的寬度點。

var plotWidth = chart.series[0].points[0].pointWidth; 

第三個問題是，我們的圖表是固定的，這是很正常的，但如果我們的集裝箱響應，我們的圖表和列的寬度將發生變化，但我們的故事情節的寬度不會。因此，我們可以將列寬設置爲固定值，並且我們的plotLine也可以更好地在window resize事件中更改plotLines寬度。但我認爲更快，更清潔就是將它們移除並重新生成。如果我們對所有的地塊使用相同的ID（我知道是錯誤的，但它是有效的，meh），我們不需要通過數組，我們能夠在一行中刪除所有。

chart.xAxis[0].removePlotLine('plot-line'); 

件的重要的事情代碼：

// add plotLines 
function addPlotLines(chart, plotWidth) {   
    for(var i = 0; i<= chart.series[0].data.length; i++) {    
     chart.xAxis[0].addPlotLine({ 
        color: 'rgba(124, 181, 236,.3)', 
        width: plotWidth, 
        value: Date.UTC(2010, 0, i), 
        dashStyle: 'solid', 
        id: 'plot-line' 
     }); 
    } 
} 

// remove PlotLines 
function removePlotLines(chart) { 
    chart.xAxis[0].removePlotLine('plot-line'); 
} 

// add event resize 
window.onresize = function() { 
    removePlotLines(chart); 
    var plotWidth = chart.series[0].points[0].pointWidth; 
    addPlotLines(chart, plotWidth); 
}; 

// initialize 
var plotWidth = chart.series[0].points[0].pointWidth; 
addPlotLines(chart, plotWidth); 

在這裏，我們走了，完整的代碼和演示在http://jsfiddle.net/wbsCu/14/

而且看看本作的演出標籤上點-hover問題在這裏沒有涉及Bold X-Axis Label on Point Hover in Highcharts Column Chart。

玩得開心！