Javascript 海图定制海图

我正在用它来开发一个定制的图表。这是我自己得到的。 这是我的密码：

$(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标签

使溢出图表区域后面的点可单击

我尝试了几乎所有的配置选项，但没有成功

有什么建议吗？

一些答案：

1） 请参阅“来自文档”属性

2） 请参阅“来自文档”属性

3） 另一个文档属性

---

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

我现在就吻您！非常感谢你。还有一点。你能查一下我的电话号码吗。有没有办法删除垂直线？当然，为xAxis添加

线宽：0

。很好！工作完美！谢谢还有一个问题。你知道有没有办法把yAxis标签上的文字沿着直线拉伸？你太接近了！使用

标签.style.width

而不是

标签.width

；）见：