Как добавить несколько цветов фона в линейных диаграммах - PullRequest
Новая
       59

Как добавить несколько цветов фона в линейных диаграммах

1 голос
/ 10 февраля 2020

В моем требовании я хочу отображать точки без линий на линейных графиках со стати c цветов фона. Я почти достиг, но я не могу установить заданный c цвет фона осей на графике. Я использовал график. js (линейные графики). Пожалуйста, смотрите мой код ниже, я так старался, пожалуйста, смотрите прикрепленное изображение, я хочу развиваться как этот график (o-10 осей 1 цвет, как этот, цвет фона фиксируется с этими осями). 

    new Chart(document.getElementById("line-chart"), {
      type: 'line',
      data: {
        labels: [0,10, 20, 30, 40, 50, 60, 70, 80, 90],
        datasets: [{
          data: [0,350, 400, 150, 98, 220, 410],
          label: "Man Engines",
         // borderColor: "#3e95cd",
          backgroundColor: 'rgba(244, 81, 30, 0.8)',
          borderColor: 'rgba(244, 81, 30, 0.8)',
          pointBackgroundColor: 'rgba(244, 81, 30, 0.5)',
          pointBorderColor: 'rgba(244, 81, 30, 0.8)',
          fill: false,
          pointRadius: 5,
          showLine: false
        }
        ]
      },
      options: {
        // title: {
        //   display: true,
        //   text: 'World population per region (in millions)'
        // }, 
        scales: {
          xAxes: [{
            gridLines: {
              drawOnChartArea: false
            },
            // ticks: {
            //   min: 1
            // }
          }],
          yAxes: [{
            gridLines: {
              drawOnChartArea: false
            }
            
          }]
        }
    //     legend: { display: false },
		// fillColor: 'rgba(255, 128, 0, 0.8)',
      }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="line-chart"></canvas>

Как этот вывод

Текущий достигнутый выход

1 Ответ

0 голосов
/ 11 февраля 2020

Вместо использования type: line, вы должны использовать type: scatter.

Затем вы можете использовать chart js -plugin-annotation. js для рисования отдельных блоков и текста на вашем графике. 

new Chart(document.getElementById("line-chart"), {
      type: 'scatter',
      data: {
        datasets: [{
          data: [{x: 3, y: 398}, {x: 5, y: 350}, {x: 12, y: 396}, {x: 20, y: 160}, {x: 25, y: 100}, {x: 30, y: 195} ],
          label: "Man Engines",
          borderColor: 'rgba(244, 81, 30, 0.8)',
          pointBackgroundColor: 'rgba(0, 0, 0, 1)',
          pointBorderColor: 'rgba(244, 81, 30, 0.8)',
          pointRadius: 5
        }
        ]
      },
      options: {
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'BN [mgKOH/g]',
              fontStyle: 'bold'
            },
            gridLines: {
              drawOnChartArea: false
            },
            ticks: {
              min: 0,
              max: 70,
              stepSize: 10
            }
          }],
          yAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'Iron (Fe) total [mg/kg]',
              fontStyle: 'bold'
            },
            gridLines: {
              drawOnChartArea: false
            },
            ticks: {
              min: 0,
              max: 500,
              stepSize: 100
            }
          }]
        },
        annotation: {
          events: ["click"],
          annotations: [       
            {
              drawTime: "beforeDatasetsDraw",
              type: "box",
              xScaleID: "x-axis-1",
              yScaleID: "y-axis-1",
              xMin: 0,
              xMax: 100,
              yMin: 0,
              yMax: 500,
              backgroundColor: "rgba(212, 0, 0, 0.8)",
              borderWidth: 0
            },
            {
              drawTime: "beforeDatasetsDraw",
              type: "box",
              xScaleID: "x-axis-1",
              yScaleID: "y-axis-1",
              xMin: 10,
              xMax: 100,
              yMin: -10,
              yMax: 300,
              backgroundColor: "rgba(255, 255, 0, 0.8)",
              borderColor: "rgba(255, 128, 0, 0.5)",
              borderWidth: 6
            },
            {
              drawTime: "beforeDatasetsDraw",
              type: "box",
              xScaleID: "x-axis-1",
              yScaleID: "y-axis-1",
              xMin: 15,
              xMax: 45,
              yMin: -10,
              yMax: 200,
              backgroundColor: "rgba(0, 128, 0, 0.8)",
              borderColor: "rgba(128, 255, 0, 0.5)",
              borderWidth: 6
            },
            {
            drawTime: "afterDatasetsDraw",
            type: 'line',
              mode: 'horizontal',
              scaleID: 'y-axis-1',
              value: 400,
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0,
              label: {
                fontStyle: 'normal',
                fontSize: 18,
                fontColor: 'white',
                backgroundColor: 'rgba(0, 0, 0, 0)',
                content: "Danger - Do not operate in this area",
                enabled: true
              }
            },
            {
            drawTime: "afterDatasetsDraw",
            type: 'line',
              mode: 'horizontal',
              scaleID: 'y-axis-1',
              value: 250,
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0,
              label: {
                xAdjust: 40,
                fontStyle: 'normal',
                fontSize: 18,
                fontColor: 'black',
                backgroundColor: 'rgba(0, 0, 0, 0)',
                content: "Alert area - Adjustment of feed rate may be needed",
                enabled: true
              }
            },
            {
            drawTime: "afterDatasetsDraw",
            type: 'line',
              mode: 'horizontal',
              scaleID: 'y-axis-1',
              value: 150,
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0,
              label: {
                xAdjust: -50,
                fontStyle: 'normal',
                fontSize: 18,
                fontColor: 'white',
                backgroundColor: 'rgba(0, 0, 0, 0)',
                content: "Save area",
                enabled: true
              }
            }
          ]
        }
      }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="line-chart"></canvas>
...