ハイチャートドーナツと棒グラフ

Question

私はこれに似たグラフを複製しようとしています（下の画像を参照）。私は各グラフに2つの別個のプランカを付けました。 Example Image

ドーナツグラフ： ===>私がanから動的に設定するためにこれらの値をしようとしている

chart: { 
       type: 'pie' 
      }, 
      credits: { 
       enabled: false 
      }, 
      colors: ['#F59640', '#A589D9', '#F16D64', '#35BEC1', '#EDEDED'], 
      title: { 
       text: '82', 
       style: { 
        color: '#333333', 
        fontWeight: 'bold', 
        fill: '#333333', 
        width: '211px', 
        fontSize: '32px' 
       }, 
       y: -30, 
       verticalAlign: 'middle' 
      }, 
      subtitle: { 
       text: 'out of 100', 
       style: { 
        color: '#333333', 
        fill: '#333333', 
        width: '211px', 
        fontSize: '28px' 
       }, 
       y: 30, 
       verticalAlign: 'middle' 
      }, 
      plotOptions: { 
       pie: { 
        innerSize: '60%', 
        outerRadius: '70%', 
        allowPointSelect: true, 
        cursor: 'pointer', 
        dataLabels: { 
         enabled: false 
        } 
       } 
      }, 
      exporting: { 
       enabled: false 
      }, 
      series: [{ 
       data: [ 
        ['Collaboration', 19.61], 
        ['Reading Articles', 17.47], 
        ['Insight', 19.95], 
        ['Personalization', 25] 
       ] 
      }] 

1. Plunkr
   については、以下のコメントを参照してください。私が達成しようとしています何

   API。合計値は100％で、カテゴリは4〜5です。

2. ほぼ完全で、項目が100％まで追加されない場合は空白の値を表示するだけです。

棒グラフ： ===>Bar Chart Plunkr

  chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: '' 
     }, 
     legend: { 
      enabled: false 
     }, 
     xAxis: { 
      categories: ['Collaboration', 'Reading Articles', 'Insight', 'Personalization'], 
      visible: false, 
     }, 
     yAxis: { 
      min: 0, 
      max: 25, 
      title: { 
       text: null 
      }, 
      stackLabels: { 
       enabled: true, 
      }, 
     }, 
     exporting: { 
      enabled: false 
     }, 
     plotOptions: { 
      series: { 
       stacking: 'percent' 
      }, 
      bar: { 
       grouping: false, 
       dataLabels: { 
        enabled: false 
       } 
      } 
     }, 
     credits: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Remaining', 
      data: [5.39, 7.53, 5.05, 0], 
      borderWidth: 0, 
      color: 'rgba(0,0,0,0)' 
     }, { 
      name: 'Remaining', 
      data: [5.39, 7.53, 5.05, 0], 
      borderWidth: 0, 
      stack: 1, 
      animation: false, 
      color: '#CCC' 
     }, { 
      name: 'Completed', 
      data: [{ y: 19.61, color: '#F59640' }, { y: 17.47, color: '#A589D9' }, { y: 19.95, color: '#F16D64' }, 
      { y: 25, color: '#35BEC1' }] 
     }] 

1. 画像のような各バーを分離することができません。各バーは互いに積み重なっていません。

2. 各バーの上のラベルの両方を一致させ、各ラベルの下にYラベルを表示することもできます。

この時点では2つ以上のリンクを投稿できません。

ご協力いただきありがとうございます。

Answer 1

述べたようにセバスチャン、ドーナツグラフのために、あなたは残りの部分を計算することができますし、

series: [{ 
    data: [ 
     ['Collaboration', 19.61], 
     ['Usability', 17.47], 
     ['Insight', 19.95], 
     ['Personalization', 25], 
     { 
      name: 'Missing', 
      y: 17.97, // calculate missing value and use as a data point 
      color: '#ccc' 
     } 
    ] 
}] 

ドーナツグラフのplnkrデータポイントとしてそれを追加します。棒グラフの場合https://plnkr.co/edit/LiwDUGg0B6XeXRhXwFGE?p=preview

、そうでありませんplotOptions.series.stacking = percentが必要です。すでにデータであなたが渡されたことを行っているとき、これはパーセントにあなたの系列データを変換している。

を今、あなたは最大値バー&を分離するよう

{ 
    name: 'Remaining', 
    data: [25, 25, 25, 25], 
    borderWidth: 0, 
    stack: 1, 
    animation: false, 
    color: '#CCC' 
} 

にあなたの残りのシリーズを設定することができますラベルを作成するには、4つの別々のチャートを作成し、ngForを使用してそれらをDOMにロードします。唯一

Answer 2

棒グラフ：

あなたはすべてのポイントのために別のシリーズを作成し、それ自身の（適切に配置）は、x軸とy軸にそれをリンクすることにより、見た目のようなものを達成することができます。

ライブ作業例：

var xAxes = [{ 
    categories: ['Collaboration'], 
}, { 
    categories: ['Reading Articles'], 
    top: '25%' 
}, { 
    categories: ['Insight'], 
    top: '50%' 
}, { 
    categories: ['Personalization'], 
    top: '75%' 
}].map(function(axis) { 
    // common options 
    axis.height = '25%'; 
    axis.offset = 0; 
    axis.lineWidth = 0; 
    axis.tickWidth = 0; 

    return axis; 
}); 

すべてのシリーズIの場合：位置決め軸の場合 http://jsfiddle.net/kkulig/41q6k8tc/

var series = [{ 
     data: [{ 
      y: 19.61, 
      color: '#F59640' 
     }], 
     name: 'Complete', 
     xAxis: 0, 
     yAxis: 0 
    }, { 
     data: [{ 
     y: 17.47, 
     color: '#A589D9' 
     }], 
     name: 'Complete', 
     xAxis: 1, 
     yAxis: 1 
    }, { 
     data: [{ 
     y: 19.95, 
     color: '#F16D64' 
     }], 
     name: 'Complete', 
     xAxis: 2, 
     yAxis: 2 
    }, { 
     data: [{ 
     y: 25, 
     color: '#35BEC1' 
     }], 
     name: 'Complete', 
     xAxis: 3, 
     yAxis: 3 
    }]; 

は、私は（それがAPIに記載されていないが、それは動作します）topプロパティを使用このコードを使用して対応する「未完了」シリーズを作成しました：

for(var i = series.length - 1; i >= 0; i--) { 
    series.push({ 
    name: 'Uncompleted', 
    data: [25 - series[i].data[0].y], 
    xAxis: series[i].xAxis, 
    yAxis: series[i].yAxis, 
    color: '#ccc', 
    dataLabels: { 
     enabled: false 
    } 
    }); 
} 

これらのシリーズは積み重ねられています。

tickPositionsを使用すると、2つのラベルだけを持つように軸を設定できます。

ツールチップがトップオフセットを正しく処理していないようです。 y = anchor[1]行をHighcharts.Tooltip.prototype.refreshコア機能の+ (point.series.xAxis.top || 0) - (this.chart.plotTop || 0);に変更する必要があります。

APIリファレンス：

• http://api.highcharts.com/highcharts/series.bar.xAxis
• http://api.highcharts.com/highcharts/series.bar.yAxis
• http://api.highcharts.com/highcharts/yAxis.tickPositions