0

我想通过 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>

4

2 回答 2

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 演示

于 2013-03-02T17:14:40.427 回答
0

只是为了好玩，原因是老主题，但很有趣。

选项一可能是创建一个堆叠柱形图并在其中一个系列上禁用工具提示......不是一个很好的，哈哈（请不要这样做）。一个更好的解决方案和足够接近的方法是为每个点创建 plotLines。

第一个问题是我们需要创建与列一样多的 plotLines。因此，我们不会在选项中执行此操作，而是在图表呈现后执行此操作并检查系列数据长度。

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。

玩得开心！

于 2015-02-04T16:30:39.727 回答