TransWikia.com

Как сделать у зеленой трапеции прямой угол?

Stack Overflow на русском Asked by Adam Maynter on December 11, 2021

Подскажите пожалуйста как в графике сделать зеленую трапецию под прямым углом.

const firstData = [0, 0, 0, 96.68, 95.85, 95.02, 94.19, 93.36, 83.36, 73.36, 63.36, 53.36, 43.36, 33.36, 23.36, 13.36, 3.36];
const secondData = [99.17, 98.34, 97.51, 96.68, 95.85, 95.02, 94.19, 93.36, 83.36, 73.36, 63.36, 53.36, 43.36, 33.36, 23.36, 13.36, 3.36];



let fortesGraphEach = document.getElementById('fortes_graph__8');
fortesGraphEach = new Chart(fortesGraphEach, {
  type: 'line',

  data: {
    labels: ['июн'20', 'июл'20', 'авг'20', 'сен'20', 'окт'20', 'ноя'20', 'дек'20', 2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028, 2029, 2030],
    datasets: [{
        label: 'Надежность',
        data: firstData,
        lineTension: 0,
        backgroundColor: ['rgba(111,207,151,0.3)'],
        borderWidth: 0.1,

      },
      {
        borderWidth: 3,
        borderColor: '#D64D4D',
        lineTension: 0.7,
        borderDash: [20, 10],
        radius: 0,
        fill: '',
        data: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
      },
      {
        borderWidth: 2,
        borderColor: '#5C6CC0',
        radius: 0,
        backgroundColor: ['rgba(111,207,151,0.3)'],
        lineTension: 0,
        fill: false,
        data: secondData,
        spanGaps: true

      },
      {

        label: "Снижение надёжность",
        type: "bar",
        barThickness: 1,
        borderWidth: 1,
        borderColor: '#D64D4D',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 110, 0, 0, 0, 0, 0, 0, 0, 0, ]
      }
    ]

  },
  options: {
    plugins: {
      datalabels: {
        display: false
      }
    },
    scales: {
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Процент надежности, %',
          fontSize: 12,
          fontWeight: 300,
        },
        stacked: false,
        gridLines: {
          display: true,
          drawBorder: true,
          drawOnChartArea: true,
        },
        ticks: {
          stepSize: 10,
          min: 0,
          max: 110,
          color: '#868B97',
          padding: 10,
          fontSize: 12,
          beginAtZero: true
        }
      }],
      xAxes: [{

        gridLines: {
          display: true,
          drawBorder: true,
          drawOnChartArea: true,
        },

      }]
    },
    legend: {
      display: false
    },
  }
});
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}
<canvas id="fortes_graph__8"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

Заранее спасибо!

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP