1

特定の条件でチャートのバーを特定の色で塗りつぶしていますが、マウスをバーの上に置くと元の色に戻ります。

$(function () {
        $('#container').highcharts({
           chart: {
                    type: 'column'
                },
                title: {
                    text: 'Title',
                    style: { fontSize: '17px', color: 'Black', fontWeight: 'bold', fontfamily: 'Times New Roman' }
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories: [
                    'AT',
                    'KW',
                    'ND',
                    'IT'
                ]
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Attributes Scores'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0,
                        borderWidth: 0,
                        minPointLength: -200
                    }
                },
            series: [{
                    name: 'YTD',
                    color: "#4F81BD",
                    data: [67, 66, 87, 60]


                    // data: eval('(' + seriesYTD + ')')


                }, {
                    name: 'MAY',
                    color: "#BFBFBF",
                    data: [65, 65, 57, 70]

                }, {
                    name: 'JUNE',
                    color: "#92D050",
                    data: [61, 77, 47, 94]

                }],

      exporting: {
                    enabled: false
                }
            }, function (chart) {

                var ct = 0;
                var minArray = new Array();



                $.each(chart.series[0].data, function (i, data) {
                    min = data.y;

                    minArray[ct] = data.y;

                    // alert(minArray[ct]);
                    ct = ct + 1;
                });

                ct = 0;

                $.each(chart.series[2].data, function (i, data) {

                    //  alert('1: '+ data.y + ' - 2: '+ minArray[ct]);

                    if (data.y < minArray[ct])
                        data.graphic.attr({
                            fill: 'red'
                        });
                    else
                        data.graphic.attr({
                            fill: '#92D050'
                        });
                        ct = ct + 1;


                });



            });
});

このjsfiddleのコードを見てください

この問題を解決する方法を提案して、ツールチップ ビューの後、変更された色、つまり赤が​​特定のバーに保持されるようにします。

4

1 に答える 1

1

point.updateそのポイントの実際の状態/色だけでなく、ポイントオプションに影響するものを使用してみてください。 http://jsfiddle.net/NWmKL/3/を参照してください。

于 2013-06-10T11:01:37.663 に答える