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。

玩得开心！