Question

我试图使用看起来像这样的高图来绘制图表。有人可以提供一个简单的例子。

我试过这个：

$(function () {
$('#container').highcharts({
    chart: {
        type: 'scatter',
        zoomType: 'xy'
    },
    title: {
        text: 'Positioning Today'
    },
    subtitle: {
        text: 'XXX XXX'
    },
    xAxis: {
        title: {
            enabled: true,
            text: 'Compliance'
        },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true
    },
    yAxis: {
        title: {
            text: 'Category'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        x: 100,
        y: 70,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
        borderWidth: 1
    },
    plotOptions: {
        scatter: {
            marker: {
                radius: 5,
                states: {
                    hover: {
                        enabled: true,
                        lineColor: 'rgb(100,100,100)'
                    }
                }
            },
            states: {
                hover: {
                    marker: {
                        enabled: false
                    }
                }
            },
            tooltip: {
                headerFormat: '<b>{series.name}</b><br>',
                pointFormat: '{point.x} cm, {point.y} kg'
            }
        }
    },
    series: [{
        name: 'Acme',
        color: 'rgba(223, 83, 83, .5)',
        data: [[3, 4], [3, 5], [4, 2], [3, 2]]

    }, {
        name: 'Competitive Landscape',
        color: 'rgba(119, 152, 191, .5)',
        data: [[4, 3], [5, 3], [2, 4], [2, 3]]
    }]
});
});

http://jsfiddle.net/u6gbd6bx/3/

但是，我很难在Y轴上获得网格和标签。

Answer 1

要在Y轴上获取类别，您需要在轴属性中指定类别：

http://api.highcharts.com/highcharts#yAxis.categories

要获取网格，您可以为每个轴指定网格线的宽度和颜色：

请注意，图表上的网格线通常会分散数据的注意力 - 如果真的有必要，请将它们变得微妙。

要将网格线与类别对齐，您可以使用tickmarkPlacement属性：

http://api.highcharts.com/highcharts#yAxis.tickmarkPlacement

最后，为了使您的数据与您的类别正确对齐，您需要提供类别数组索引作为y值。

因此，如果您的第一个类别是＆＃34;支持＆＃34;，则为支持类别中的任何数据点提供x值为0

另请注意，默认情况下，y轴类别从下到上运行 - 如果您希望它们从上到下运行，则可以在y轴上设置reversed: true。

示例：

http://jsfiddle.net/jlbriggs/6a5jdvyy/

Answer 2

请查看以下示例：http://jsfiddle.net/mushigh/qr815f25/2/

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
$(function() {
  $('#container').highcharts({
    chart: {
      type: 'scatter',
      zoomType: 'xy'
    },
    title: {
      text: 'Positioning Today'
    },
    subtitle: {
      text: 'XXX XXX'
    },
    xAxis: {
      title: {
        enabled: true,
        text: 'Compliance'
      },
      gridLineWidth: 2,
      startOnTick: true,
      endOnTick: true,
      showLastLabel: true
    },
    yAxis: {
      title: {
        text: 'Category'
      },
      categories: ['', 'Support', 'Compliance', 'Risk', 'Fast', 'Easy to Get Started'],
    },
    legend: {
      layout: 'horizontal',
      align: 'center',
      verticalAlign: 'bottom',

      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
      y: 15
    },
    plotOptions: {
      scatter: {
        marker: {
          radius: 5,
          states: {
            hover: {
              enabled: true,
              lineColor: 'rgb(100,100,100)'
            }
          }
        },
        states: {
          hover: {
            marker: {
              enabled: false
            }
          }
        },
        tooltip: {
          headerFormat: '<b>{series.name}</b><br>',
          pointFormat: '{point.x} cm, {point.y} kg'
        }
      }
    },
    series: [{
      name: 'Acme',
      color: 'rgba(223, 83, 83, .5)',
      data: [
        [3, 4],
        [3, 5],
        [4, 2],
        [3, 2]
      ]

    }, {
      name: 'Competitive Landscape',
      color: 'rgba(119, 152, 191, .5)',
      data: [
        [4, 3],
        [5, 3],
        [2, 4],
        [2, 3]
      ]
    }]
  });
});

Y轴和网格上的标签

2 个答案: