I'm using Highcharts to develop a customized chart. Here is what I've gotten by my own jsfiddle. Here is my code:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area',
            inverted: true,
            height: 700,
            width: 780,
            marginRight: 20
        },
        credits: {
            enabled: false
        },
        colors: [
            '#828385',
            '#3AAFC1',
            '#F87D2A',
            '#80699B',
            '#3D96AE',
            '#DB843D',
            '#92A8CD',
            '#A47D7C',
            '#B5CA92'],
        exporting: {
            enabled: false
        },
        title: {
            text: ' '
        },
        subtitle: {
            style: {
                position: 'absolute',
                right: '0px',
                bottom: '10px'
            }
        },
        legend: {
            itemDistance: 30,
            x: 180,
            verticalAlign: 'top'
        },
        xAxis: {
            categories: ["Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8", "Label9", "Label10"],
            offset: -410,
            labels: {
                overflow: 'justify'
            },
            plotLines: [{
                color: '#A0A0A0',
                width: 1,
                value: 0

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 1

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 2

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 3

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 4

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 5

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 5

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 6

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 7

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 8

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 9

            }]
        },
        yAxis: {
            title: {
                text: 'Índice teste'
            },
            max: 100,
            min: 0,
        },
        plotOptions: {
            area: {
                fillOpacity: 0.5
            },
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            if (jQuery('#type_group_name_hidden').val() == 'Processo') {
                                jQuery('#type_group_name_hidden').val('Atividade');
                            } else if (jQuery('#type_group_name_hidden').val() == 'Atividade') {
                                jQuery('#type_group_name_hidden').val('Procedimento');
                            } else if (jQuery('#type_group_name_hidden').val() == 'Procedimento') {
                                jQuery('#type_group_name_hidden').val('Processo');
                            }
                            jQuery('#group_name_hidden').val(this.category);
                            requestAjaxChart('processos', buildProcessos);
                        }
                    }
                },
                marker: {
                    lineWidth: 1
                },
                threshold: 50
            }
        },
        series: [{
            name: "Market",
            data: [46.503590664272934, 51.39078282828278, 56.89226932668327, 47.66801075268824, 46.82561768530563, 59.23058676654176, 51.08220338983055, 46.17849829351536, 55.84550063371354, 51.428756058158314]
        }, {
            name: "My network",
            data: [48.175, 27.159999999999997, 39.916666666666664, 38.6, 53.85, 38.949999999999996, 30.4, 51.9, 33.519999999999996, 54.7875]
        }, {
            name: "Avg",
            data: [70, 80, 65, 75, 85, 82, 72, 69, 71, 58]
        }]
    });
});

Even it looks pretty good, it's not exactly what the client desire. I need to do some changes as described bellow:

  1. Remove all the vertical lines on xAxis. As my chart is a inverted one, I couldn't figure out how to remove them.
  2. On the xAxis values (0 - 100), remove the intermediaries values (10, 20, 30, ...) keeping just the first and last value (0, 100)
  3. Move the yAxis labels upon the horizontal lines
  4. Make clickable the points behind the overflowed chart area

I've tried almost all configuration options but with no success.

Any suggestion?

有帮助吗?

解决方案

Some answers :

1) See from docs gridlineWidth property.

2) See from docs tickPositions property.

3) Another docs labels.y property.

4) Not possible, even if it's SVG/VML it still is HTML, you can't make clickable DIV which is positioned behind another one.

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top