आकार बदलने के बाद:

before resize

आकार बदलने से पहले:

after resize

यह मेरा कोड है। मैं हमेशा एक ही आकार के चार्ट बनाना चाहता हूं, लेकिन मुझे नहीं पता कि कैसे।

यह chart.js रेंज सेटिंग है, लेकिन मुझे लगता है कि वे इस स्थिति में गलत हैं।

अक्ष रेंज सेटिंग्स की संख्या को देखते हुए, यह समझना महत्वपूर्ण है कि वे सभी एक दूसरे के साथ कैसे इंटरैक्ट करते हैं।

सुझाई गई अधिकतम और सुझाई गई न्यूनतम सेटिंग्स केवल उन डेटा मानों को बदलती हैं जिनका उपयोग अक्ष को स्केल करने के लिए किया जाता है। ये ऑटो फिट व्यवहार को बनाए रखते हुए अक्ष की सीमा को बढ़ाने के लिए उपयोगी हैं।

      /*#######################################*/
      var warnColor = 'rgba(255, 0, 0, 1)';
      var careColor = 'rgba(255, 228, 0, 1)';
      var protectColor = 'rgba(54, 162, 235, 1)';

      Chart.pluginService.register({//PLUG IN
        beforeUpdate: function(chartInstance) {
          chartInstance.data.datasets.forEach(function(dataset) {
            dataset.backgroundColor = dataset.data.map(function(data) {
              if ( data >= 70) return warnColor;
              else if ( data >= 50 && data < 70 ) return careColor;
              else return protectColor;
            })
          })
        }
      });

      Chart.defaults.global.defaultFontSize = 15;

      var ctx = $('#myChart');
      var myChart = new Chart(ctx, {
        type: 'bar',
          data: {
            labels: ["CPU Usage", "Memory Usage", "Network Usage", "Disk Usage", "SysvIPC Count"],
            datasets: [{
              data: [10,20,30,40,50],
              borderColor: [
              'rgba(54, 162, 235, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(54, 162, 235, 1)'
              ],
              borderWidth: 1
            }]
          },
          options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    layout: {
                        padding: {
                          left: 0,
                          right: 0,
                          top: 40,
                          bottom: 0
                        }
                      },
                      onClick: barClickEvent,
                      legend: {
                        display: false
                      },
                      scales: {
                        yAxes: [{
                          ticks: {
                            min: 0,
                            max: 100,
                            beginAtZero:true
                          },
                        }]
                      },
                      tooltips: {
                          enabled: true
                      },
                      hover: {
                          animationDuration: 0
                      },
                      animation: {
                          duration: 1,
                          onComplete: function () {
                            var chartInstance = this.chart,
                                ctx = chartInstance.ctx;
                                ctx.font = Chart.helpers.fontString(17, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'bottom';

                                this.data.datasets.forEach(function (dataset, i) {
                                    var meta = chartInstance.controller.getDatasetMeta(i);
                                    meta.data.forEach(function (bar, index) {
                                        var data = dataset.data[index];
                                        ctx.fillStyle = "#000000";
                                        if (index !== 4) {//qnum
                                          data += '%';
                                        }
                                        ctx.fillText(data, bar._model.x, bar._model.y - 5);
                                    });
                                });
                            }
                        }
                    }
        });
        function barClickEvent(event, array){

          var activePoints = myChart.getElementsAtEvent(event);

          switch (activePoints[0]._index) {
            case 0: window.location = '/usage_cpu';
              break;
            case 1: window.location = '/usage_mem';
              break;
            case 2: window.location = '/usage_tcp';
              break;
            case 3: window.location = '/usage_disk';
              break;
            case 4: window.location = '/stat_ipcq';
              break;
            default: window.location = '/';
          }
        }
    
3
박철형 27 जून 2017, 03:30

3 जवाब

पुराना सवाल, लेकिन ऐसा इसलिए हो सकता है क्योंकि आपको autoSkip को निष्क्रिय करना होगा:

scales: {
    xAxes: [{
        stacked: false,
        beginAtZero: true,
        scaleLabel: {
            labelString: 'Month'
        },
        ticks: {
            autoSkip: false
        }
    }]
}

आप इसके बारे में यहां अधिक पढ़ सकते हैं: http://www.chartjs. org/docs/latest/axes/cartesian/#tick-configuration

8
Araw 7 फरवरी 2018, 09:53
यह काम करने का एकमात्र तरीका एक javascript Chart.scaleService.updateScaleDefaults('category', { gridLines: { drawBorder: false, drawOnChartArea: false, drawTicks: false }, ticks: { // autoSkip: false, padding: 20 }, maxBarThickness: 10 }); के अंदर है जो वैश्विक कॉन्फ़िगरेशन फ़ंक्शन की तरह दिखता है, अगर मैं इसे वहां जोड़ता हूं तो यह विश्व स्तर पर बदलता है, और यदि मैं अलग-अलग चार्ट में सेटिंग जोड़ता हूं तो यह काम नहीं करता है
 – 
Marcos Di Paolo
10 जिंदा 2020, 02:37

मैं xAxes का उपयोग कर रहा था: [{ticks: {autoSkip: false}}, {gridLines: {display: false}}] और यह विफल हो रहा था और जैसे ही मैंने xAxes के रूप में ग्रिडलाइन को हटा दिया: [{ticks: {autoSkip: false}} //{ gridLines: {display: false }}] इसने काम करना शुरू कर दिया: जिसका मतलब है कि संपत्ति के संयोजन पर भी विचार करने की जरूरत है।

0
Saurabh 5 नवम्बर 2019, 15:07

यह काम करने का एकमात्र तरीका updateScaleDefaults फ़ंक्शन के अंदर है।

Chart.scaleService.updateScaleDefaults('category', {
            gridLines: {
                drawBorder: false,
                drawOnChartArea: false,
                drawTicks: false
            },
            ticks: {
                // autoSkip: false,
                padding: 20
            },
            maxBarThickness: 10
        });

जो वैश्विक कॉन्फ़िगरेशन फ़ंक्शन की तरह दिखता है, अगर मैं इसे वहां जोड़ता हूं तो यह विश्व स्तर पर बदलता है, और यदि मैं अलग-अलग चार्ट में सेटिंग जोड़ता हूं तो यह काम नहीं करता है

0
Marcos Di Paolo 10 जिंदा 2020, 02:41