Question

我正在使用Highcharts开发自定义图表。这是我自己jsfiddle得到的。这是我的代码：

$(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]
        }]
    });
});

即使它看起来很不错，但这并不是客户所希望的。我需要做一些改变，如下所述：

删除xAxis上的所有垂直线。由于我的图表是倒置的，我无法弄清楚如何删除它们。
在xAxis值（0 - 100）上，删除中间值（10,20,30，...），只保留第一个和最后一个值（0,100）
在水平线上移动yAxis标签
点击溢出图表区域后面的点

我已经尝试了几乎所有配置选项但没有成功。

有什么建议吗？

Answer 1

一些答案：

1）请参阅文档gridlineWidth属性。

2）请参阅文档tickPositions属性。

3）另一个文档labels.y属性。

4）不可能，即使它是SVG / VML它仍然是HTML，你也不能制作位于另一个后面的可点击DIV。

Highcharts定制图表

1 个答案: