2016-06-16 1 views
0

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

В принципе, я хочу, чтобы мой холст изменился в соответствии с периодом, выбранным в моем выпадающем списке. Скажем, если я выбираю 1 день, холст shuld будет сжат, чтобы отображать данные за один день, я имею в виду, если мне нужно отображать данные в течение одного месяца, ширина моего холста должна быть 100% (данные должны отображаться на весь холст), одна неделя холст должен сжиматься, чтобы сказать 25% всего холста (данные должны отображаться в 25% холста), а за один день ширина должна составлять 10% от холста.

Если кто-то знает, как это должно быть достигнуто с помощью chart.js, было бы полезно

вар MyData = { метки: Timex, наборы данных: [{ данные: percentageY }]} ;

MEMORY_LINE_CHART = new Chart(ctx, { 
      type: 'line', 
      data: myData, 
      options: { 
       bezierCurve: false , 
       scaleIntegersOnly: false, 
       animation : false, 
       responsive: true, 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero:true 
         } 
        }], 
        xAxes: [{ 
         ticks: { 
          display:true 
         } 
        }] 
       } // scales 
      } 
     }); 

ответ

0

Обычно диаграммы отображаются только так, Jus представьте, если мои максимальные данные на 1 год огромны. И если пользователь хочет видеть ony в течение последнего дня, так что большой мой холст будет говорить 600x600, который вмещает около одного года данных, просто представьте, насколько мал будет размер для отображения данных за один день, если мы продолжим уменьшать ширину в соответствии с ваши требования или спецификации.

Вы можете увидеть примеры здесь, которые не изменить ширину или размер

https://finance.yahoo.com/echarts?s=YHOO+Interactive# {% 22allowChartStacking% 22: истинный} диаграммы

http://www.marketwatch.com/investing/stock/live/charts

задумываемся и наслаждаться построения графиков;)

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