chartjs 配置选项和注释

问题描述 投票：0回答：1

带有注释插件的折线图和折线图选项：无法同时使用，只能使用选项：注释或选项：比例：{...}

注释折线图“aspentRation 等”的选项。 42 到 50 之间所需的色块可见。 包括变量chartPlugins，没有可见的颜色块。

这就是我想要的： Desired Image 任何帮助将非常感激。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ChartT1</title>
</head>
<body>
<div  id="TC1">
    <canvas id="ChartT1"></canvas>
</div>

<script src='https://cdn.jsdelivr.net/npm/chart.js@^4'></script>
<script src='https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@^3'></script>

<script>

var wwtemp   = [ 42.2, 42.4, 43.2, 45.1, 46.5, 48.7, 49.4, 50.5, 49.9, 49.2 ];
var tempdata = [ 12.3, 13.5, 14.6, 15.3, 16.3, 15.3, 14.6, 13.7, 11.8, 10.7 ];
var timeaxis = ['12:10','12:15','12:20','12:25','12:30','12:35','12:40','12:45','12:50','12:55'];

const <!DOCTYPE html>
<html lang="en">
<head>
    <title>ChartT1</title>
</head>
<body>
<div  id="TC1">
    <canvas id="ChartT1"></canvas>
</div>

<script src='https://cdn.jsdelivr.net/npm/chart.js@^4'></script>
<script src='https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@^3'></script>

<script>

var wwtemp   = [ 42.2, 42.4, 43.2, 45.1, 46.5, 48.7, 49.4, 50.5, 49.9, 49.2 ];
var tempdata = [ 12.3, 13.5, 14.6, 15.3, 16.3, 15.3, 14.6, 13.7, 11.8, 10.7 ];
var timeaxis = ['12:10','12:15','12:20','12:25','12:30','12:35','12:40','12:45','12:50','12:55'];

const chartPlugins = {
    plugins: {
    annotation: {
      annotations: {
        box1: {
          type: 'box',
          yMin: 42,
          yMax: 50,
          borderWidth: 0,
          backgroundColor: 'rgba(204, 255, 153, 0.3)'
        }
      }
    }
  }
}   // chartPlugins */

const chartConfig = {
    type: 'line',
    data: {
        labels: timeaxis,
        datasets: [ {
            label: 'Temperature (°C)',
            data: tempdata,
            borderColor: 'blue',
            borderWidth: 1,
            pointStyle: 'line', // Set point style to 'line'
            radius: 0,          // no point
        },
        {
            label: 'WW-Temp (°C)',
            data: wwtemp,
            borderColor: 'red',
            borderWidth: 1,
            pointStyle: 'line', // Set point style to 'line'
            radius: 0,          // Set point
        } ],
    },
    options: chartPlugins,
/***    options: {
        chartPlugins,
        responsive: true,
        aspectRatio: 1,
        maintainAspectRatio: true,
        scales: {
            x: { title: { },
                ticks: { maxRotation: 80,
                         minRotation: 80,
                },
            },
            y: { beginAtZero: false,
                 min: -10,
                 max: 60,
                ticks:{ stepSize: 10, }
            }
        }, 
    }, ***/
}
// Show chart
const ctx = document.getElementById('ChartT1').getContext('2d');
const chart = new Chart(ctx, chartConfig);

</script>

</body>
</html>

= {
    plugins: {
    annotation: {
      annotations: {
        box1: {
          type: 'box',
          yMin: 42,
          yMax: 50,
          borderWidth: 0,
          backgroundColor: 'rgba(204, 255, 153, 0.3)'
        }
      }
    }
  }
}   // chartPlugins */

const chartConfig = {
    type: 'line',
    data: {
        labels: timeaxis,
        datasets: [ {
            label: 'Temperature (°C)',
            data: tempdata,
            borderColor: 'blue',
            borderWidth: 1,
            pointStyle: 'line', // Set point style to 'line'
            radius: 0,          // no point
        },
        {
            label: 'WW-Temp (°C)',
            data: wwtemp,
            borderColor: 'red',
            borderWidth: 1,
            pointStyle: 'line', // Set point style to 'line'
            radius: 0,          // Set point
        } ],
    },
    options: chartPlugins,
/***    options: {
    chartPlugins,
    responsive: true,
        aspectRatio: 1,
        maintainAspectRatio: true,
        scales: {
        x: { title: { },
            ticks: { maxRotation: 80,
                    minRotation: 80,
                },
            },
            y: { beginAtZero: false,
                 min: -10,
                 max: 60,
        ticks:{ stepSize: 10, }
            }
        }, 
    }, ***/
}
// Show chart
const ctx = document.getElementById('ChartT1').getContext('2d');
const chart = new Chart(ctx, chartConfig);

</script>

</body>
</html>
annotations chart.js
1个回答
0
投票

找到解决方案，请参阅：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ChartT1</title>
</head>
<body>
<div  id="TC1">
    <canvas id="ChartT1" width="800" height="400"></canvas>
</div>

<script src='https://cdn.jsdelivr.net/npm/chart.js@^4'></script>
<script src='https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@^3'></script>

<script>

var wwtemp   = [ 42.2, 42.4, 43.2, 45.1, 46.5, 48.7, 49.4, 50.5, 49.9, 49.2 ];
var tempdata = [ 12.3, 13.5, 14.6, 15.3, 16.3, 15.3, 14.6, 13.7, 11.8, 10.7 ];
var timeaxis = ['12:10','12:15','12:20','12:25','12:30','12:35','12:40','12:45','12:50','12:55'];
var tempaxis = [ -10, -5, 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60 ];

var dw = window.innerWidth ||
         document.documentElement.clientWidth || document.body.clientWidth;
var dh = window.innerHeight||
         document.documentElement.clientHeight|| document.body.clientHeight;
var ratio = dw/dh;

const box1 = {
    type: 'box',
    yMin: 42,
    yMax: 50,
    borderWidth: 0,
    backgroundColor: 'rgba(204, 255, 153, 0.20)',
};  // box1
const box2 = {
    type: 'box',
    yMin: -0,
    yMax: -10,
    borderWidth: 0,
    backgroundColor: 'rgba(000, 000, 255, 0.025)',
};  // box2
 

const chartConfig = {
    type: 'line',
    data: {
        labels: timeaxis,
        datasets: [ {
            label: 'Temperature (°C)',
            data: tempdata,
            borderColor: 'blue',
            borderWidth: 1,
            pointStyle: 'line',
            radius: 0,
        },
        {
            label: 'WW-Temp (°C)',
            data: wwtemp,
            borderColor: 'red',
            borderWidth: 1,
            pointStyle: 'line', // Set point style to 'line'
            radius: 0,          // Set point
        } ],
    },  // data
    options: {
        plugins: {
            annotation: {
            drawTime: 'afterDatasetsDraw',
            annotations: [ box1, box2 ],
            }
        },
        responsive: true,
        aspectRatio: ratio,
        maintainAspectRatio: true,
        scales: {
            x: { title: { },
                ticks: { maxRotation: 45,
                        minRotation: 45,
                },
            },
            y: { beginAtZero: false,
                min: -10,
                max: 60,
                ticks:{ stepSize: 5, }
            }
        },
    },  // options
};  // chartConfig

const ctx = document.getElementById('ChartT1').getContext('2d');
const chart = new Chart(ctx, chartConfig);

</script>

</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.