Сплайны с графическими колонками с групповыми столбцами

Question

Есть ли способ объединить сплайны с группированными столбцами в HighCharts?

Вот что у меня есть.

1. 4 Категории по оси Х-
2. Каждая категория имеет 3 колонки
3. В действительности, у меня будет 4 группы с каждой группы показаны 3 колонки каждый
4. Теперь на вторичном оси Y, I хотите нарисовать сплайн, который пересекает все 3 столбца во всех четырех группах.

Кроме того, я хотел бы точку сплайна, чтобы быть сосредоточенными на каждом на соответствующей колонке ..

http://jsfiddle.net/3SjWT/8/

даже возможно ли это?

Спасибо заранее!

Код:

$(function() { 
    $('#container').highcharts({ 
     chart: {}, 
     title: { 
      text: 'Combination chart' 
     }, 
     xAxis: { 
      categories: ['North', 'East', 'West', 'South'], 
      gridLineWidth: 0 
     }, 

     yAxis: [{ // Primary yAxis 
      gridLineWidth: 0, 
      labels: { 

       style: { 
        color: '#89A54E' 
       } 
      }, 
      title: { 
       text: 'Sales', 
       style: { 
        color: '#89A54E' 
       } 
      } 
     }, { // Secondary yAxis 
      title: { 
       text: 'Profit %', 
       style: { 
        color: Highcharts.getOptions().colors[3] 
       } 
      }, 
      labels: { 

       style: { 
        color: '#4572A7' 
       } 
      }, 
      opposite: true 
     }], 


     tooltip: { 
      formatter: function() { 
       var s; 
       if (this.point.name) { // the pie chart 
        s = '' + this.point.name + ': ' + this.y; 
       } else { 
        s = '' + this.x + ': ' + this.y; 
       } 
       return s; 
      } 
     }, 
     labels: { 
      items: [{ 
       html: '', 
       style: { 
        left: '40px', 
        top: '8px', 
        color: 'black' 
       } 
      }] 
     }, 
     series: [{ 
      type: 'column', 
      name: 'Black', 
      data: [136, 123, 147, 133] 
     }, { 
      type: 'column', 
      name: 'BW Print', 
      data: [213, 187, 226, 200] 
     }, { 
      type: 'column', 
      name: 'Fashion', 
      data: [213, 187, 226, 200] 
     }, 

     { 
      type: 'spline', 
      name: 'Profit %', 
      yAxis: 1, 
      data: [20, 30, 40], 
      /* Profit % for Black, BW Print and Fashion 
      For North, -> 20, 30, 40 % 
      For East ->  35, 45, 55% 
      For West ->  45, 35, 50% 
      Four South -> 33, 42, 55% 
      */ 
      color: '#CD0000', 
      marker: { 
       lineWidth: 1, 
       lineColor: '#CD0000', 
       fillColor: '#CD0000' 
      } 
     } 

     ] 
    }); 
}); 

Answer 1

3 вещи:

1) Вы можете получить что-то вроде этого, добавив вторую ось х для серии сплайна, добавив категорию для каждого столбца, и играть с вашим groupPadding на серии колонке, чтобы получить вещи выровнены

example: 

http://jsfiddle.net/jlbriggs/3SjWT/11/

2) с использованием двойной оси Y диаграммы для двух совершенно различных мер, как это действительно плохая идея. Это очень распространенная ошибка, но, тем не менее, ошибка.

Настройка диаграммы таким образом заставляет зрителя делать сравнения, которые не являются реальными, путем наложения данных разных масштабов и тем самым отображения взаимодействий между наборами данных, которые на самом деле не существуют. (т. е. прибыль, по-видимому, «меньше» продаж «черной категории» на Севере и превышает продажи на Востоке для модной cетигории. Это, конечно, не что-то реальное, но зритель остается с этим впечатление подсознательно).

3) возможно, что более важно, данные о прибыли не должны отображаться с линейной диаграммой вообще. Линейная диаграмма используется для отображения шаблона изменения с течением времени. Использование строки для подключения дискретных категориальных данных снова дает ложное впечатление - что шаблон линии имеет смысл для данных.
Но это не значимый шаблон вообще, поскольку он только соединяет отдельные категориальные точки данных, которые могут быть произвольно переупорядочены.

Лучшим способом отображения этих данных будет две диаграммы столбцов, одна над другой. Один график, показывающий данные о продажах, а другой - данные прибыли.

Многие люди часто боятся использовать несколько диаграмм, чувствуя, что какой-то один график является идеальным, но на самом деле множество диаграмм очень часто являются лучшим вариантом.

(пример: http://jsfiddle.net/jlbriggs/3SjWT/16/ )

FWIW.

Answer 2

Точки, данные jlbriggs, действительны, но есть моменты, когда это действительно необходимо. Я создал плагин Highcharts, чтобы решить эти одну с использованием следующих критериев:

1. сплайн точка должна быть сосредоточена на каждый соответствующем столбце (DONE)
2. сплайн точки выровнена по каждому соответствующему колонке следует также скрыть или показать, когда это столбец скрывается или отображается. (50% Готово - только скрыть правильно)
3. Все должно быть динамичным, если это возможно.
4. Сохраните шаблон по умолчанию Highcharts с включенным групповым включением (не изменен).
5. Разрешить для укладки колонн слишком

его до сих пор не сделали, но вы можете обратиться, как я построил плагин. Я до сих пор есть некоторые «To Do», что мне нужно исправить хотя

Ссылка: highcharts-plugin-splines-with-grouped-columns