Ярлыки на оси Y и сетки

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

Чтобы получить сетку, вы можете указать ширину и цвет для линий сетки для каждой оси:

• http://api.highcharts.com/highcharts#yAxis.gridLineColor

• http://api.highcharts.com/highcharts#yAxis.gridLineWidth

Обратите внимание, что линии сетки на диаграмме очень часто отвлекают от данных - сделать их тонкими, если они действительно необходимы.

Чтобы выровнять линии сетки с категориями, вы можете использовать tickmarkPlacement свойство:

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

И, наконец, чтобы получить ваши данные, чтобы правильно выстроить с категориями, вы необходимо указать индекс массива категорий как значение y.

Таким образом, если первая категория «Поддержка», вы предоставляете й значение 0 для любой точки данных в категории поддержки и т.д.

Следует также отметить, что по умолчанию у категории оси запуска снизу top - если вы хотите, чтобы они выполнялись сверху вниз, вы можете установить reversed: true на свою ось y.

Пример:

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