Question

我想通过highcharts来确定这种类型的图形。

我已经建立了一些东西 - 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中设置颜色的方法不止一种。一种方法是通过串联指定颜色。

   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

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

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

第三个问题是我们的图表是固定的，这没关系，但如果我们的容器有响应，我们的图表和列将会出现问题。宽度会改变，但是我们的情节线条和宽度不会。所以我们可以将列宽设置为固定值，我们的plotLines也可以设置，或者甚至更好地在window resize事件中更改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/

进行完整的代码和演示

请看一下这里没有涉及的{+ 3}}这个展示标签点悬停问题。

玩得开心！

highcharts配置

2 个答案: