Question

我在chartjs中完成了一个chart line，它已经可以正常工作了，但是我想对其进行更改以使其有条件，也就是说，如果搜索条件仅返回一天结果而不是line chart，而是bar chart，

    values_chart_bruto = {"labels": ["15/02/2019"], "datasets": [{"label": "IPCA 2019","backgroundColor" : "rgba(219,30,110,0.2)","borderColor" : "rgba(219,30,110,0.89)","data" : [0.03]},{"label": "IPCA 2024","backgroundColor" : "rgba(219,30,110,0.23)","borderColor" : "rgba(219,30,110,0.89)","data" : [1.10]},{"label": "IPCA S 2026","backgroundColor" : "rgba(115,126,213,0.28)","borderColor" : "rgba(115,126,213,0.98)","data" : [4.79]},{"label": "IPCA S 2035","backgroundColor" : "rgba(15,33,170,0.14)","borderColor" : "rgba(15,33,170,0.98)","data" : [0.77]},{"label": "IPCA S 2050","backgroundColor" : "rgba(29,52,229,0.19)","borderColor" : "rgba(29,52,229,0.98)","data" : [0.32]},{"label": "Prefixado 2020","backgroundColor" : "rgba(17,109,26,0.29)","borderColor" : "rgba(17,109,26,0.96)","data" : [0.09]},{"label": "Prefixado 2021","backgroundColor" : "rgba(14,181,30,0.24)","borderColor" : "rgba(14,181,30,0.96)","data" : [0.34]},{"label": "Prefixado 2022","backgroundColor" : "rgba(25,237,45,0.18)","borderColor" : "rgba(25,237,45,0.96)","data" : [0.18]},{"label": "Prefixado 2025","backgroundColor" : "rgba(25,237,45,0.18)","borderColor" : "rgba(25,237,45,0.96)","data" : [2.09]},{"label": "Prefixado S 2027","backgroundColor" : "rgba(218,219,26,0.19)","borderColor" : "rgba(218,219,26,0.93)","data" : [1.35]},{"label": "Prefixado S 2029","backgroundColor" : "rgba(192,193,32,0.19)","borderColor" : "rgba(200,201,27,0.93)","data" : [0.44]},{"label": "Selic 2021","backgroundColor" : "rgba(10,206,182,0.19)","borderColor" : "rgba(10,206,182,0.99)","data" : [0.02]},{"label": "Selic 2023","backgroundColor" : "rgba(15,194,129,0.2)","borderColor" : "rgba(15,194,129,0.99)","data" : [0.49]},{"label": "Selic 2025","backgroundColor" : "rgba(15,194,129,0.2)","borderColor" : "rgba(15,194,129,0.99)","data" : [null]}]};
//    values_chart_bruto = {"labels": ["12/02/2019","13/02/2019","14/02/2019","15/02/2019"], "datasets": [{"label": "IPCA 2019","backgroundColor" : "rgba(219,30,110,0.2)","borderColor" : "rgba(219,30,110,0.89)","data" : [0.04,0.02,0.02,0.03]},{"label": "IPCA 2024","backgroundColor" : "rgba(219,30,110,0.23)","borderColor" : "rgba(219,30,110,0.89)","data" : [1.39,1.02,0.84,1.10]},{"label": "IPCA S 2026","backgroundColor" : "rgba(115,126,213,0.28)","borderColor" : "rgba(115,126,213,0.98)","data" : [1.70,3.09,-28.52,4.79]},{"label": "IPCA S 2035","backgroundColor" : "rgba(15,33,170,0.14)","borderColor" : "rgba(15,33,170,0.98)","data" : [0.15,0.62,0.26,0.77]},{"label": "IPCA S 2050","backgroundColor" : "rgba(29,52,229,0.19)","borderColor" : "rgba(29,52,229,0.98)","data" : [0.01,0.37,-0.81,0.32]},{"label": "Prefixado 2020","backgroundColor" : "rgba(17,109,26,0.29)","borderColor" : "rgba(17,109,26,0.96)","data" : [0.12,0.21,0.17,0.09]},{"label": "Prefixado 2021","backgroundColor" : "rgba(14,181,30,0.24)","borderColor" : "rgba(14,181,30,0.96)","data" : [0.26,0.93,0.78,0.34]},{"label": "Prefixado 2022","backgroundColor" : "rgba(25,237,45,0.18)","borderColor" : "rgba(25,237,45,0.96)","data" : [null,0.26,0.24,0.18]},{"label": "Prefixado 2025","backgroundColor" : "rgba(25,237,45,0.18)","borderColor" : "rgba(25,237,45,0.96)","data" : [1.85,2.57,0.65,2.09]},{"label": "Prefixado S 2027","backgroundColor" : "rgba(218,219,26,0.19)","borderColor" : "rgba(218,219,26,0.93)","data" : [0.10,1.47,0.38,1.35]},{"label": "Prefixado S 2029","backgroundColor" : "rgba(192,193,32,0.19)","borderColor" : "rgba(200,201,27,0.93)","data" : [null,0.54,0.09,0.44]},{"label": "Selic 2021","backgroundColor" : "rgba(10,206,182,0.19)","borderColor" : "rgba(10,206,182,0.99)","data" : [0.03,0.02,0.03,0.02]},{"label": "Selic 2023","backgroundColor" : "rgba(15,194,129,0.2)","borderColor" : "rgba(15,194,129,0.99)","data" : [0.51,0.48,0.50,0.49]},{"label": "Selic 2025","backgroundColor" : "rgba(15,194,129,0.2)","borderColor" : "rgba(15,194,129,0.99)","data" : [null,null,null,null]}]};

var config_bruto = {
  type: 'line',
  data: values_chart_bruto,
  options: {
    responsive: true,
    title: {
      display: false,
      text: 'Chart.js Line Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Período'
        }
      }],
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Valor'
        }
      }]
    }
  }
};




window.onload = function() {
    var ctxBruto = document.getElementById("rendimentoBruto").getContext('2d');
    window.myLineBruto = new Chart(ctxBruto, config_bruto);      
};

<script src="https://www.chartjs.org/dist/2.7.3/Chart.bundle.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>

<div class="x_content">
  <div class="demo-container" style="">
    <canvas id="rendimentoBruto"></canvas>
  </div>
</div>

在此示例中，我有两个value_chart_bruto数据，其中第一个仅返回一天，而第二个返回几天，因此当返回一天时，值type: 'line'变为{ {1}}，从而将图表的格式更改为我需要的格式，

注意：：请求是由ajax发出的，但我仅将这一部分隔离开来，以使问题更清楚。

预先感谢您的帮助。

Answer 1

您可以使用简单的if语句来确定图表类型...

// determine chart type
if (values_chart_bruto.labels.length === 1) {
  config_bruto.type = 'bar';
} else {
  config_bruto.type = 'line';
}

请参阅以下工作片段...

values_chart_bruto = {"labels": ["15/02/2019"], "datasets": [{"label": "IPCA 2019","backgroundColor" : "rgba(219,30,110,0.2)","borderColor" : "rgba(219,30,110,0.89)","data" : [0.03]},{"label": "IPCA 2024","backgroundColor" : "rgba(219,30,110,0.23)","borderColor" : "rgba(219,30,110,0.89)","data" : [1.10]},{"label": "IPCA S 2026","backgroundColor" : "rgba(115,126,213,0.28)","borderColor" : "rgba(115,126,213,0.98)","data" : [4.79]},{"label": "IPCA S 2035","backgroundColor" : "rgba(15,33,170,0.14)","borderColor" : "rgba(15,33,170,0.98)","data" : [0.77]},{"label": "IPCA S 2050","backgroundColor" : "rgba(29,52,229,0.19)","borderColor" : "rgba(29,52,229,0.98)","data" : [0.32]},{"label": "Prefixado 2020","backgroundColor" : "rgba(17,109,26,0.29)","borderColor" : "rgba(17,109,26,0.96)","data" : [0.09]},{"label": "Prefixado 2021","backgroundColor" : "rgba(14,181,30,0.24)","borderColor" : "rgba(14,181,30,0.96)","data" : [0.34]},{"label": "Prefixado 2022","backgroundColor" : "rgba(25,237,45,0.18)","borderColor" : "rgba(25,237,45,0.96)","data" : [0.18]},{"label": "Prefixado 2025","backgroundColor" : "rgba(25,237,45,0.18)","borderColor" : "rgba(25,237,45,0.96)","data" : [2.09]},{"label": "Prefixado S 2027","backgroundColor" : "rgba(218,219,26,0.19)","borderColor" : "rgba(218,219,26,0.93)","data" : [1.35]},{"label": "Prefixado S 2029","backgroundColor" : "rgba(192,193,32,0.19)","borderColor" : "rgba(200,201,27,0.93)","data" : [0.44]},{"label": "Selic 2021","backgroundColor" : "rgba(10,206,182,0.19)","borderColor" : "rgba(10,206,182,0.99)","data" : [0.02]},{"label": "Selic 2023","backgroundColor" : "rgba(15,194,129,0.2)","borderColor" : "rgba(15,194,129,0.99)","data" : [0.49]},{"label": "Selic 2025","backgroundColor" : "rgba(15,194,129,0.2)","borderColor" : "rgba(15,194,129,0.99)","data" : [null]}]};
//    values_chart_bruto = {"labels": ["12/02/2019","13/02/2019","14/02/2019","15/02/2019"], "datasets": [{"label": "IPCA 2019","backgroundColor" : "rgba(219,30,110,0.2)","borderColor" : "rgba(219,30,110,0.89)","data" : [0.04,0.02,0.02,0.03]},{"label": "IPCA 2024","backgroundColor" : "rgba(219,30,110,0.23)","borderColor" : "rgba(219,30,110,0.89)","data" : [1.39,1.02,0.84,1.10]},{"label": "IPCA S 2026","backgroundColor" : "rgba(115,126,213,0.28)","borderColor" : "rgba(115,126,213,0.98)","data" : [1.70,3.09,-28.52,4.79]},{"label": "IPCA S 2035","backgroundColor" : "rgba(15,33,170,0.14)","borderColor" : "rgba(15,33,170,0.98)","data" : [0.15,0.62,0.26,0.77]},{"label": "IPCA S 2050","backgroundColor" : "rgba(29,52,229,0.19)","borderColor" : "rgba(29,52,229,0.98)","data" : [0.01,0.37,-0.81,0.32]},{"label": "Prefixado 2020","backgroundColor" : "rgba(17,109,26,0.29)","borderColor" : "rgba(17,109,26,0.96)","data" : [0.12,0.21,0.17,0.09]},{"label": "Prefixado 2021","backgroundColor" : "rgba(14,181,30,0.24)","borderColor" : "rgba(14,181,30,0.96)","data" : [0.26,0.93,0.78,0.34]},{"label": "Prefixado 2022","backgroundColor" : "rgba(25,237,45,0.18)","borderColor" : "rgba(25,237,45,0.96)","data" : [null,0.26,0.24,0.18]},{"label": "Prefixado 2025","backgroundColor" : "rgba(25,237,45,0.18)","borderColor" : "rgba(25,237,45,0.96)","data" : [1.85,2.57,0.65,2.09]},{"label": "Prefixado S 2027","backgroundColor" : "rgba(218,219,26,0.19)","borderColor" : "rgba(218,219,26,0.93)","data" : [0.10,1.47,0.38,1.35]},{"label": "Prefixado S 2029","backgroundColor" : "rgba(192,193,32,0.19)","borderColor" : "rgba(200,201,27,0.93)","data" : [null,0.54,0.09,0.44]},{"label": "Selic 2021","backgroundColor" : "rgba(10,206,182,0.19)","borderColor" : "rgba(10,206,182,0.99)","data" : [0.03,0.02,0.03,0.02]},{"label": "Selic 2023","backgroundColor" : "rgba(15,194,129,0.2)","borderColor" : "rgba(15,194,129,0.99)","data" : [0.51,0.48,0.50,0.49]},{"label": "Selic 2025","backgroundColor" : "rgba(15,194,129,0.2)","borderColor" : "rgba(15,194,129,0.99)","data" : [null,null,null,null]}]};

var config_bruto = {
  type: 'line',
  data: values_chart_bruto,
  options: {
    responsive: true,
    title: {
      display: false,
      text: 'Chart.js Line Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Período'
        }
      }],
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Valor'
        }
      }]
    }
  }
};


window.onload = function() {
    var ctxBruto = document.getElementById("rendimentoBruto").getContext('2d');

    // determine chart type
    if (values_chart_bruto.labels.length === 1) {
      config_bruto.type = 'bar';
    } else {
      config_bruto.type = 'line';
    }

    window.myLineBruto = new Chart(ctxBruto, config_bruto);
};

<script src="https://www.chartjs.org/dist/2.7.3/Chart.bundle.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>

<div class="x_content">
  <div class="demo-container" style="">
    <canvas id="rendimentoBruto"></canvas>
  </div>
</div>

创建条件图

1 个答案: