コード次の表は、highchartsを使用して生成された

グラフを変更するどのように論理的に2トップOG多色ブロックに書き込まれた1を変更する必要が

$(function() { 
 

 

 
\t $('#container_graph').highcharts({ 
 

 
     \t chart: { 
 
\t \t \t type: 'column' 
 
\t \t }, 
 
    \t \t \t title: { 
 
    \t \t \t \t text: 'Mun-mate'// - Last 30 Days' 
 
    \t \t \t }, 
 
    \t \t \t xAxis: { 
 
    \t \t \t \t categories: ['JO3','JO3','JO3','JO3',' JO3',' JO3',' JE7',' JO 3',' JO3',' JO3',' WA2',' MA3'], 
 
    \t \t \t \t labels: { 
 
    \t \t \t \t \t rotation: -45, 
 
    \t \t \t \t \t align: 'right', 
 
    \t \t \t \t \t style: { 
 
    \t \t \t \t \t \t fontSize: '10px', 
 
    \t \t \t \t \t \t fontFamily: 'Verdana, sans-serif' 
 
    \t \t \t \t \t } 
 
    \t \t \t \t } 
 
    \t \t \t }, 
 
    \t \t \t yAxis: { 
 
    \t \t \t \t min: 0, 
 
    \t \t \t \t title: { 
 
    \t \t \t \t \t text: 'Total lls' 
 
    \t \t \t \t }, 
 
    \t \t \t \t stackLabels: { 
 
    \t \t \t \t \t enabled: true, 
 
    \t \t \t \t \t style: { 
 
    \t \t \t \t \t \t fontWeight: 'bold', 
 
    \t \t \t \t \t \t color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
 
    \t \t \t \t \t } 
 
    \t \t \t \t } 
 
    \t \t \t }, 
 
    \t \t \t legend: { 
 
    \t \t \t \t align: 'right', 
 
    \t \t \t \t x: -70, 
 
    \t \t \t \t verticalAlign: 'top', 
 
    \t \t \t \t y: 20, 
 
    \t \t \t \t floating: true, 
 
    \t \t \t \t backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white', 
 
    \t \t \t \t borderColor: '#CCC', 
 
    \t \t \t \t borderWidth: 1, 
 
    \t \t \t \t shadow: false 
 
    \t \t \t }, 
 
    \t \t \t tooltip: {formatter: function() {var str=this.key;return '<b> Target: WE9</b><br/>'+this.series.name +': '+ str.replace('INMATE','')+'<br/>';}}, \t \t \t \t 
 
    \t \t \t plotOptions: { 
 
    \t \t \t \t column: { 
 
    \t \t \t \t \t stacking: 'normal', 
 
    \t \t \t \t \t cursor: 'pointer', 
 
    \t \t \t \t \t point: { 
 
    \t \t \t \t \t \t events: { 
 
    \t \t \t \t \t \t \t click: function() { 
 
    \t \t \t \t \t \t \t \t } 
 
    \t \t \t \t \t \t \t } 
 
    \t \t \t \t \t \t } 
 
    \t \t \t \t \t } 
 
    \t \t \t \t } 
 
    \t \t \t }, 
 
    \t \t \t series: [ 
 
    \t \t \t \t \t { 
 
    \t \t \t \t \t \t type: 'column', 
 
    \t \t \t \t \t \t name: 'Inmate1', 
 
    \t \t \t \t \t \t color:'yellow', 
 
    \t \t \t \t \t \t data: [ 
 
    \t \t \t \t \t \t \t \t {name:"INMATE JO3", y: 1}, 
 
          {name:"INMATE JO3", y: 1}, 
 
          {name:"INMATE JO3", y: 1}, 
 
          {name:"INMATE JO3", y: 1}, 
 
          {name:"INMATE JO3", y: 1}, 
 
          {name:"INMATE JO3", y: 1}, 
 
          {name:"INMATE JE7", \t y: 1}, 
 
          {name:"INMATE JO3", y: 1}, 
 
          {name:"INMATE JO3", y: 1}, 
 
          {name:"INMATE JO3", y: 1}, 
 
          {name:"INMATE WA2", \t y: 1}, 
 
          {name:"INMATE MA3", \t y: 1}] 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t { 
 
    \t \t \t \t \t \t type: 'column', 
 
\t \t \t \t \t \t \t name: 'Inmate2', 
 
    \t \t \t \t \t \t \t color:'orange', 
 
\t \t \t \t \t \t \t data: [ 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"INMATE JO3", \t y: 1}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}] 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t type: 'column', 
 
\t \t \t \t \t \t \t name: 'Inmate3', 
 
\t \t \t \t \t \t \t color:'pink', 
 
\t \t \t \t \t \t \t data: [ 
 
\t \t \t \t \t \t  {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}] 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t type: 'column', 
 
\t \t \t \t \t \t \t name: 'Inmate4', 
 
\t \t \t \t \t \t \t color:'violet', 
 
\t \t \t \t \t \t \t data: [ 
 
\t \t \t \t \t \t \t {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}, 
 
          {name:"", y: 0}] 
 
       }] 
 
     }); 
 
    });

それはJE7として1を含み、他の色は同じ1ブロックを取るが、色の数を数えて2を示す。

出典

2016-07-14 Lucky

あなたのケースではxパラメータを使用できると思います。あなたのチャートの同じブロックに同じxパラメータがあるかもしれません、ここで例を見つけることができます：http：//jsfiddle.net/joq2qp0s/ –

@GrzegorzBlachliński編集したコードを確認してください – Lucky

だから私はstackLabels 。代わりに標準のdataLabelsを使用することができます：http://jsfiddle.net/e01ew9ot/ –

highchartのテキストラベルを使用して変更することができるtooltip formatter

例：ツールチップのコンテンツは、多数の変更することができるHTMLのサブセットからレンダリングさfiddle

formatter: function() { 
         return this.total; 
       }

フィドルリンクすべての方法で、実装者がコンテンツを完全に制御できるようにします。ツールヒント設定オブジェクトのオプションに加えて、series.tooltipによってツールチップの各シリーズの表示方法を設定することができます。

tooltip.headerFormatを使用して、ツールチップのヘッダー部分を変更することができます。共有ツールチップでは、最初の系列のheaderFormatが使用されます。

各シリーズのリストは、tooltip.pointFormatオプション、または各シリーズの個別のpointFormatで指定します。

フッター部分は、tooltip.footerFormatオプションで設定できます。

上記のすべてのオプションは、プログラムによるコントロールのためのtooltip.formatterコールバックによってオーバーライドできます。

出典

2016-07-19 09:33:04 Lucky

コード次の表は、highchartsを使用して生成された

答えて

関連する問題