Highcharts Combo Graph Перекрытие Афоризм

Я хочу реализовать комбинированный график с 1. Круговая диаграмма 2. Колонка «Normal» 3. ПозвоночникHighcharts Combo Graph Перекрытие Афоризм

Теперь моя проблема в том, что если значения столбцов большой, он перекрывается круговая диаграмма, которая не делает большой просмотр, у меня есть образец на JS Fiddle sample

$(function() { 
    $('#container').highcharts({ 
     chart: { 
     }, 
     title: { 
      text: 'Combination chart' 
     }, 
     xAxis: { 
      categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'] 
     }, 
     tooltip: { 
      formatter: function() { 
       var s; 
       if (this.point.name) { // the pie chart 
        s = ''+ 
         this.point.name +': '+ this.y +' fruits'; 
       } else { 
        s = ''+ 
         this.x +': '+ this.y; 
       } 
       return s; 
      } 
     }, 
     labels: { 
      items: [{ 
       html: 'Total fruit consumption', 
       style: { 
        left: '40px', 
        top: '8px', 
        color: 'black' 
       } 
      }] 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal' 
      } 
     }, 
     series: [{ 
      type: 'column', 
      name: 'Jane', 
      data: [9, 9, 1, 3, 4] 
     }, { 
      type: 'column', 
      name: 'John', 
      data: [2, 9, 5, 7, 6] 
     }, { 
      type: 'column', 
      name: 'Joe', 
      data: [4, 3, 3, 9, 0] 
     }, { 
      type: 'spline', 
      name: 'Average', 
      data: [3, 2.67, 3, 6.33, 3.33], 
      marker: { 
       lineWidth: 2, 
       lineColor: Highcharts.getOptions().colors[3], 
       fillColor: 'white' 
      } 
     }, { 
      type: 'pie', 
      name: 'Total consumption', 
      data: [{ 
       name: 'Jane', 
       y: 13, 
       color: Highcharts.getOptions().colors[0] // Jane's color 
      }, { 
       name: 'John', 
       y: 23, 
       color: Highcharts.getOptions().colors[1] // John's color 
      }, { 
       name: 'Joe', 
       y: 19, 
       color: Highcharts.getOptions().colors[2] // Joe's color 
      }], 
      center: [20, 80], 
      size: 100, 
      showInLegend: false, 
      dataLabels: { 
       enabled: false 
      } 
     }] 
    }); 
});

пожалуйста, дайте мне подсказку о том, как решить эту проблему, одна вещь, которая приходит на ум, это установить диапазон X больше, то максимальное значение из но не знаете, как это сделать.

источник

2013-12-17 Hemant.Gupta

Я использую asp.net и этот график будет динамичным характер, так что мне нужно решение, которое является динамичная природа. –

'yAxis: {max: 40 // нам нужно будет динамически установить это ... Требуется более точный способ сделать это}', если использовать это, он отлично работает, но есть ли лучший способ? –

Вы можете попробовать установить maxPadding: 0.5 или какое-либо более высокое значение, см: http://jsfiddle.net/ykgNR/1/

источник

2013-12-17 12:33:31

Спасибо @Pawel, это очень сработало для меня ... отличное решение. –

FYI Я использовал 1, поскольку он наилучшим образом отвечал моим потребностям. –

Я советую вам использовать две отдельные графики.

один для пирога и другой для комбинации линии и колонки.

есть ли какое-либо принуждение для вас отображать как комбинированную диаграмму, так и круговую диаграмму в том же разделе диаграммы?

источник

2013-12-17 05:19:12 Strikers

Да @ strikers его принуждение, так как клиент хочет этого так, это единственное, что мешает мне реализовать его, клиент любит его, поэтому я не могу покончить с этим. –

, тогда вы можете сделать только одну вещь, чтобы максимизировать yAxis динамически в зависимости от высоты, занимаемой круговой диаграммой – Strikers

Я понимаю это, но поскольку значения являются динамическими ... это может быть гистограмма максимум 20 или в случаях 2000, так как я могу вычислить max? любые идеи будут высоко оценены. –

Highcharts Combo Graph Перекрытие Афоризм

ответ

Смежные вопросы