highcharts配置

Question

我想用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轴标签并更改系列颜色。

可以通过以下方式禁用X轴值

xAxis: {
    labels: {
              enabled:false
            }
        }

在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。因此，我们将在呈现图表并检查序列数据长度之后执行此操作，而不是在options中执行此操作。

chart.series[0].data.length

第二个问题是，我们必须设置plotLine宽度，所以我们应该在设置列的点宽度之前检查，以便将plotLine宽度设置为等于我们的列。

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

第三个问题是我们的图表是固定的，这没问题，但是如果我们的容器是响应式的，我们的图表和列的宽度将会改变，但是我们的plotLines的宽度不会改变，所以我们可以将你的列的宽度和我们的plotLines设置为一个固定值，或者，更好的是，在窗口调整事件时改变我们的plotLines宽度。如果我们对所有的图都使用相同的id (我知道这是错误的，但它是有效的)，我们不需要遍历数组，我们可以在一行中删除所有的图。

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/

看看这里没有介绍的show-label-on-point-hover问题。Bold X-Axis Label on Point Hover in Highcharts Column Chart。

玩得开心!