1

私はこれを達成するのに苦労しています:

4 つのシリーズを含む積み上げ縦棒グラフがあり、ユーザーが積み上げ縦棒 (個々の列ではなく、積み上げ縦棒全体) をクリックして、それらのポイントを選択し、幅、色を変更し、dataLabels を追加できるようにしたい選択した積み上げ列のみ。これは、選択した積み上げ列に関する詳細情報を表示するために必要です。

シリーズは次のようになります。

series: [{
    name: 'd',
    data: [120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000],
    color: '#ffffff'
}, {
    name: 'c',
    data: [40000, 67000, 94000, 121000, 148000, 175000, 202000, 229000, 256000, 283000, 310000, 337000, 364000, 391000, 418000],
    color: '#bde0db'
}, {
    name: 'b',
    data: [75000, 73000, 71000, 69000, 67000, 65000, 63000, 61000, 59000, 57000, 55000, 53000, 51000, 49000, 47000],
    color: '#a7dcf0'
}, {
    name: 'a',
    data: [450000, 425000, 400000, 375000, 350000, 325000, 300000, 275000, 250000, 225000, 200000, 175000, 150000, 125000, 100000],
    color: '#8dbad2'
}]

jsfiddle: http://jsfiddle.net/XFDdz/6/ (これについては Dmonix に感謝します!!)

これを行う方法はありますか？もしそうなら、どのように？

編集：私がここで見ることができるものから、私が望むことの一部は実行可能です（積み重ねられた列の幅が異なります）：http://www.fusioncharts.com/demos/gallery/#marimekko-chartsおよびhttp://highcharts. uservoice.com/forums/55896-general/suggestions/2303560-multi-dimensional-column-charts

誰かが幅の問題、残りのスタイリング、および選択された積み重ねられた列ポイントのデータラベルの追加について正しい方向に私を向けることができれば、私はとても感謝しています!

EDIT 2:指定されたポイントに色を設定する方法を見つけましたが、幅を設定する方法を見つける必要があります。以下に示すシリーズのソリューション：

series: [{
    name: 'd',
    data: [120000, 120000, 120000, {name: 'point 1',color: '#df4a92',y:120000,pointWidth:100}, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000],
    color: '#ffffff'
}, {
    name: 'c',
    data: [40000, 67000, 94000, {name: 'point 1',color: '#81c6bd',y:121000,pointWidth:100}, 148000, 175000, 202000, 229000, 256000, 283000, 310000, 337000, 364000, 391000, 418000],
    color: '#bde0db'
}, {
    name: 'b',
    data: [75000, 73000, 71000, {name: 'point 1',color: '#58c3eb',y:69000,pointWidth:100}, 67000, 65000, 63000, 61000, 59000, 57000, 55000, 53000, 51000, 49000, 47000],
    color: '#a7dcf0'
}, {
    name: 'a',
    data: [450000, 425000, 400000, {name: 'point 1',color: '#2e87b7',y:375000,pointWidth:100}, 350000, 325000, 300000, 275000, 250000, 225000, 200000, 175000, 150000, 125000, 100000],
    color: '#8dbad2'
}]

データ セットの pointWidth を無視します。何もしません。

編集 3: SVG 要素を直接操作して幅を設定できますが、それは悪い悪いハックであり、API を介して解決することを本当に望んでおり、このメソッドは残りの列のサイズ変更/配置を行いません:

$(".highcharts-series.highcharts-tracker rect[fill='#2e87b7']").attr('width',175)
$(".highcharts-series.highcharts-tracker rect[fill='#58c3eb']").attr('width',175)
$(".highcharts-series.highcharts-tracker rect[fill='#81c6bd']").attr('width',175)
$(".highcharts-series.highcharts-tracker rect[fill='#df4a92']").attr('width',175)
4

1 に答える 1

0

最終的な解決策は、列の高さと位置に一致する新しい SVG 要素 (Highcharts.renderer を使用) を作成し、実際のグラフ上で新しい要素を再配置することでした。次に、新しい要素の data-rel タグに基づいてデータ ラベルの位置を変更し、データ ラベルの CSS クラス名に一致させます。

唯一の (許容できる) 欠点は、列が前後の列と重なることです。

Highcharts API を介してこれを行う方法がないため、この回答を受け入れます。

于 2013-09-06T13:28:27.077 に答える