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
            }
        }

ハイチャートで色を設定する方法は複数あります。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デモ

于 2013-03-02T17:14:40.427 に答える
0

楽しみのためだけに、原因は古いテーマですが、興味深いものです。

オプション1は、積み上げ縦棒グラフを作成し、シリーズの1つでツールチップを無効にすることができます...あまり良いものではありません（笑）（これをしないでください）。より良い 1 つの解決策と十分に近いアプローチは、各ポイントに対して plotLines を作成することです。

最初の問題は、列と同じ数のプロットラインを作成する必要があることです。したがって、オプションでこれを行う代わりに、チャートがレンダリングされた後に行い、系列データの長さを確認します。

chart.series[0].data.length

2 番目の問題は、plotLine の幅を設定する必要があることです。そのため、plotLine の幅を列に等しく設定するには、列のポイント幅を事前に確認する必要があります。

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

3 番目の問題は、グラフが修正されていることです。これは問題ありませんが、コンテナーが応答している場合、グラフと列の幅は変更されますが、plotLines の幅は変更されません。したがって、列幅を固定値に設定し、plotLines も設定するか、さらに良いことに、ウィンドウのサイズ変更イベントで plotLines 幅を変更できます。しかし、それらを削除して再度生成するだけで、より高速でクリーンになると思います。すべてのプロットに同じ ID を使用する場合 (間違っていることはわかっていますが、効果的です)、配列を調べる必要はなく、すべてを 1 行で削除できます。

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/でご覧ください。

また、ハイチャートの縦棒グラフのポイント ホバーの太字の X 軸ラベルではカバーされていない show-label-on-point-hover の問題については、こちらをご覧ください。

楽しむ！

于 2015-02-04T16:30:39.727 に答える