javascript - 使用 Highcharts 创建一维图表

Question

如何创建像 HBR 网站上使用的一维散点图:

当我在浏览 HBR 的 JS 文件后尝试复制相同的内容时，我得到以下信息:

我需要消除 y 轴上的第二条网格线。

下面是我正在使用的 JS 代码:

$(function () {

    $('#highchart').highcharts({
        credits: {
            enabled: !1
        },
        chart: {
            type: "scatter",
            height: 140,
            width: 580,
            renderTo: "chart"
        },
        title: {
            style: {
                color: "#000",
                fontFamily: "Helvetica, Arial, sans-serif",
                fontSize: "12px",
                fontWeight: "bold",
                textTransform: "uppercase",
                whiteSpace: "normal"
            },
            text: "Test"
        },
        legend: {
            text: null,
            useHTML: !0,
            x: 20,
            align: "center",
            itemStyle: {
                color: "#000",
                fontFamily: "Stationery, Helvetica, Arial, sans-serif",
                fontSize: "8px",
                fontWeight: "normal",
                lineHeight: "10px",
                textTransform: "uppercase"
            },
            borderWidth: 1,
            enabled: !0,
            itemMarginTop: 0,
            itemMarginBottom: 0,
            layout: "horizontal",
            verticalAlign: "bottom"
        },
        xAxis: {
            title: {
                text: null,

            },
            min: 0,
            max: 5,
            labels: {
                enabled: !1
            },
            tickLength: 0,
            lineWidth: 0
        },
        yAxis: [{
            max: 0,
            min : 0,
            minRange :0.1,
            maxPadding: .01,
            lineWidth: 0,
            tickWidth: 2,
            tickLength: 6,
            labels: {
                y: 3
            },

            title: {
                text: "Opportunity for<br/>development",
                rotation: 0,
                align: "middle",
                offset: 50,
                style: {
                    color: "#000",
                    fontFamily: "Stationery, Helvetica, Arial, sans-serif",
                    fontSize: "10px",
                    fontWeight: "normal",
                    lineHeight: "10px",
                    textTransform: "uppercase"
                }

            },
            labels: {

                enabled: !1
            },
            tickWidth: 0,
            tickLength: 0,
            maxPadding: 0,
            padding: 30,
            gridLineWidth: 2
        }, {
            title: {
                text: "Strength",
                rotation: 0,
                align: "middle",
                offset: 50
            },
            opposite: !0
        }],
        plotOptions: {
            scatter: {
                events: {
                    legendItemClick: function () {
                        return !1
                    }
                },
                marker: {
                    radius: 8,
                    states: {
                        hover: {
                            enabled: !0
                        }
                    },
                    symbol: "circle"
                },
                tooltip: {
                    fontFamily: "Stationery, Helvetica, Arial, sans-serif",
                    headerFormat: "<b>{series.name}</b><br>",
                    pointFormat: "{point.x} out of 25"
                }
            }
        },
        series: [{
            name: "How you scored",
            color: "#4cb6e8",
            data: [[3, 0]],
        }, {
            name: "Average",
            color: "#b20303",
            data: [[4, 0]],
            zIndex: 8,
            marker: {
                symbol: "diamond"
            }

        }],

    });
});

Answer 1

使用tickInterval yAxis 的选项值大于 ( max - min ) 值的对象

yAxis: [{
    max: 0,
    min: 0,
    //...
    tickInterval: 1, // put any number bigger than (max-min) value

JSFiddle demo