在ChartJS的Chart-Canvas区域中放置文本

时间：2019-05-02 10:55:13

标签： asp.net-core canvas html5-canvas chart.js

我创建了两个x，y数组，然后使用这些数组执行了两个图表。我只想在红色图表中写一些文本。我想使用（x，y）坐标来确定文本区域。 我尝试使用Chartjs Global插件，但这会导致将所有图表写入文本。我只要求发短信一张图表。 我无法在脚本中成功使用Chartjs mono插件。 请帮助我。

这是我的代码：

<!DOCTYPE html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div class="w3-row">
        <div class="w3-col s3"><p></p></div>
        <div class="w3-col s6" align="center"><canvas id="myChart" height="120"></canvas></div>
        <div class="w3-col s3"><p></p></div>
    </div>
    <div class="w3-row">
        <div class="w3-col s3"><p></p></div>
        <div class="w3-col s6" align="center"><canvas id="myTau" height="120"></canvas></div>
        <div class="w3-col s3"><p></p></div>
    </div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script type="text/javascript">
    var xCoord = new Array(1997, 2003, 2005, 2009, 2014, 2018, 2019);
    var yCoord = new Array(1, 3, 5, 3, 6, 10, 9);
    var c = [];
    for (var i = 0; i < xCoord.length; i++) {
        var obj = { x: xCoord[i], y: yCoord[i] };
        c.push(obj);
    }
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: 'None',
                    data: c,
                    borderWidth: 1,
                    borderColor: "#3e95cd",
                    fill: false,
                    cubicInterpolationMode: 'monotone'
                }
                ]
            },
            options: {
                title: {
                    display: true,
                    text: 'My Chart'
                },
                tooltips: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        type: 'linear',
                        position: 'bottom',
                        scaleLabel: {
                            display: true,
                            labelString: 'Year Assembly',
                            fontSize: 14
                                    }
                    }],
                    yAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Aquifer Values',
                            fontSize: 15
                                    }
                    }]
                }
            }
        });
</script>

<script type="text/javascript">
    var xCoord = new Array(1997, 2003, 2005, 2009, 2014, 2018, 2019);
    var yCoord = new Array(41, 31, 11, 31, 88, 101, 91);
    var c = [];
    for (var i = 0; i < xCoord.length; i++) {
        var obj = { x: xCoord[i], y: yCoord[i] };
        c.push(obj);
    }
    var ctx = document.getElementById('myTau').getContext('2d');
    var myTau = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                label: 'None',
                data: c,
                borderWidth: 1,
                borderColor: "#ef1414",
                fill: false,
                cubicInterpolationMode: 'monotone'
            }
            ]
        },
        options: {
            title: {
                display: true,
                text: 'My Chart 2'
            },
            tooltips: {
                mode: 'nearest',
                intersect: true
            },
            scales: {
                xAxes: [{
                    type: 'linear',
                    position: 'bottom',
                    scaleLabel: {
                        display: true,
                        labelString: 'Year Assembly',
                        fontSize: 14
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Aquifer Values Corresponding',
                        fontSize: 15
                    }
                }]
            }
        }
    });
</script>

更新：

这是另一个问题：

是否可以通过chartjs坐标系代替“宽度，高度”来分配文本位置？

例如，根据xCoord和yCoord数组，是否可以设置ctx.fillText x，y坐标的位置：

代替ctx.fillText（“ s（A）”，宽* .28，高* 0.70）;可以像这样：ctx.fillText（“ s（A）”，2005，3）; （2015,9）属于chartjs坐标系。

我的目标： s（A）可以在（2005,3）点在chartjs区域看到 可以在（2015,9）点在chartjs区域看到s（A）

My Coordinate Problem Picture

这是最后一个问题代码：

<!DOCTYPE html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div class="w3-row">
        <div class="w3-col s3"><p></p></div>
        <div class="w3-col s6" align="center"><canvas id="myChart" height="120"></canvas></div>
        <div class="w3-col s3"><p></p></div>
    </div>
    <div class="w3-row">
        <div class="w3-col s3"><p></p></div>
        <div class="w3-col s6" align="center"><canvas id="myTau" height="120"></canvas></div>
        <div class="w3-col s3"><p></p></div>
    </div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script type="text/javascript">
    var plugin = {
        beforeDraw: function (chart) {
            var width = chart.chart.width,
                height = chart.chart.height,
                ctx = chart.chart.ctx;
            ctx.restore();
            ctx.font = "1em sans-serif";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillText("s(A)", width * .28, height * .70);
            ctx.fillText("s(B)", width * .75, height * .55);
            //These section were set according to canvas width and height
            //I want to set coordinates chartjs coordinates like in data {x:1993,y:70}
             // Doesnt Work Like This: ctx.fillText("s(A)", 2005, 2);
             //Doesnt Work Like This: ctx.fillText("s(B)", 2015, 9);
            ctx.save();
        }
    };
    Chart.plugins.register(plugin);

    var xCoord = new Array(1997, 2003, 2005, 2009, 2014, 2018, 2019);
    var yCoord = new Array(1, 3, 5, 3, 6, 10, 9);
    var c = [];
    for (var i = 0; i < xCoord.length; i++) {
        var obj = { x: xCoord[i], y: yCoord[i] };
        c.push(obj);
    }
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: 'None',
                    data: c,
                    borderWidth: 1,
                    borderColor: "#3e95cd",
                    fill: false,
                    cubicInterpolationMode: 'monotone'
                }
                ]
            },
            options: {
                plugins: [plugin],
                title: {
                    display: true,
                    text: 'My Chart'
                },
                tooltips: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        type: 'linear',
                        position: 'bottom',
                        scaleLabel: {
                            display: true,
                            labelString: 'Year Assembly',
                            fontSize: 14
                                    }
                    }],
                    yAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Aquifer Values',
                            fontSize: 15
                                    }
                    }]
                }
            }
        });
</script>

2 个答案:

答案 0 :(得分：0)

一个有效的例子：

var plugin = {
  id: 'plugin',
  beforeDraw: function(chart) {

    var width = chart.chart.width,
      height = chart.chart.height,
      ctx = chart.chart.ctx,
      xScale = chart.scales['x-axis-0'],
      yScale = chart.scales['y-axis-0'];

    ctx.restore();
    ctx.font = "1em sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    // ctx.fillText("s(A)", width * .28, height * .70);
    ctx.fillText(
      "s(A)",
      xScale.getPixelForValue('2005'),
      yScale.getPixelForValue(3)
    );
    ctx.fillText(
      "s(B)",
      xScale.getPixelForValue('2015'),
      yScale.getPixelForValue(9)
    );
    ctx.save();
  }
};

var xCoord = new Array(1997, 2003, 2005, 2009, 2014, 2018, 2019);
var yCoord = new Array(1, 3, 5, 3, 6, 10, 9);
var c = [];
for (var i = 0; i < xCoord.length; i++) {
  var obj = {
    x: xCoord[i],
    y: yCoord[i]
  };
  c.push(obj);
}
var ctx = document.getElementById('myTau').getContext('2d');
var myTau = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'None',
      data: c,
      borderWidth: 1,
      borderColor: "#ef1414",
      fill: false,
      cubicInterpolationMode: 'monotone'
    }]
  },
  plugins: [plugin],
  options: {
    title: {
      display: true,
      text: 'My Chart 2'
    },
    tooltips: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{
        type: 'linear',
        position: 'bottom',
        scaleLabel: {
          display: true,
          labelString: 'Year Assembly',
          fontSize: 14
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Aquifer Values Corresponding',
          fontSize: 15
        }
      }]
    }
  }
});
var ctx = document.getElementById('myTax').getContext('2d');
var myTau = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'None',
      data: c,
      borderWidth: 1,
      borderColor: "#ef1414",
      fill: false,
      cubicInterpolationMode: 'monotone'
    }]
  },
  options: {
    title: {
      display: true,
      text: 'My Chart 2'
    },
    tooltips: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{
        type: 'linear',
        position: 'bottom',
        scaleLabel: {
          display: true,
          labelString: 'Year Assembly',
          fontSize: 14
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Aquifer Values Corresponding',
          fontSize: 15
        }
      }]
    }
  }
});
<canvas id="myTau" height="120"></canvas>
<canvas id="myTax" height="120"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

创建并注册一个新的plugin来绘制文本，然后仅在第二张图表上调用它，您也可以传递数据（例如，标签数组和每个标签的位置）。

更新 ：（注册插件）

如果您是在全球范围内注册插件，则必须在每个图表中禁用不想运行的插件。

options: {
    plugins: {
        plugin: false
    }
}

-或-

如果您未在全球范围内注册插件，则在每个需要添加标签的图表中添加以下内容：

{
    plugins: [plugin]
}

注意：第二个代码段plugin中没有嵌套在options下。见过here。

更新 ：（使用x,y数据集显示文本）

要使用x,y值，您需要使用其ID来标识值的轴，默认值为x-axis-0和y-axis-0，如果添加更多，则该值会增加轴。或使用自定义轴ID。

此后，在chart实例中有一个表示轴的比例对象，并使用chart.scales['x-axis-0']访问名为getPixelForValue的函数，该函数将从该轴转换给定值到像素位置。

答案 1 :(得分：0)

<!DOCTYPE html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div class="w3-row">
        <div class="w3-col s3"><p></p></div>
        <div class="w3-col s6" align="center"><canvas id="myChart" height="120"></canvas></div>
        <div class="w3-col s3"><p></p></div>
    </div>
    <div class="w3-row">
        <div class="w3-col s3"><p></p></div>
        <div class="w3-col s6" align="center"><canvas id="myTau" height="120"></canvas></div>
        <div class="w3-col s3"><p></p></div>
    </div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script type="text/javascript">
    var plugin = {
        beforeDraw: function (chart) {
            var width = chart.chart.width,
                height = chart.chart.height,
                ctx = chart.chart.ctx;
            ctx.restore();
            ctx.font = "1em sans-serif";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillText("s(A)", width * .28, height * .70);
            ctx.fillText("s(B)", width * .75, height * .55);
            ctx.save();
        }
    };
    Chart.plugins.register(plugin);

    var xCoord = new Array(1997, 2003, 2005, 2009, 2014, 2018, 2019);
    var yCoord = new Array(1, 3, 5, 3, 6, 10, 9);
    var c = [];
    for (var i = 0; i < xCoord.length; i++) {
        var obj = { x: xCoord[i], y: yCoord[i] };
        c.push(obj);
    }
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: 'None',
                    data: c,
                    borderWidth: 1,
                    borderColor: "#3e95cd",
                    fill: false,
                    cubicInterpolationMode: 'monotone'
                }
                ]
            },
            options: {
                plugins: [plugin],
                title: {
                    display: true,
                    text: 'My Chart'
                },
                tooltips: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        type: 'linear',
                        position: 'bottom',
                        scaleLabel: {
                            display: true,
                            labelString: 'Year Assembly',
                            fontSize: 14
                                    }
                    }],
                    yAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Aquifer Values',
                            fontSize: 15
                                    }
                    }]
                }
            }
        });
</script>

<script type="text/javascript">
    var xCoord = new Array(1997, 2003, 2005, 2009, 2014, 2018, 2019);
    var yCoord = new Array(41, 31, 11, 31, 88, 101, 91);
    var c = [];
    for (var i = 0; i < xCoord.length; i++) {
        var obj = { x: xCoord[i], y: yCoord[i] };
        c.push(obj);
    }
    var ctx = document.getElementById('myTau').getContext('2d');
    var myTau = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                label: 'None',
                data: c,
                borderWidth: 1,
                borderColor: "#ef1414",
                fill: false,
                cubicInterpolationMode: 'monotone'
            }
            ]
        },
        options: {
            title: {
                display: true,
                text: 'My Chart 2'
            },
            tooltips: {
                mode: 'nearest',
                intersect: true
            },
            scales: {
                xAxes: [{
                    type: 'linear',
                    position: 'bottom',
                    scaleLabel: {
                        display: true,
                        labelString: 'Year Assembly',
                        fontSize: 14
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Aquifer Values Corresponding',
                        fontSize: 15
                    }
                }]
            }
        }
    });
</script>

这是问题。文字写在所有图表上。我的目标只是一张红色图表（我的图表2）。

相关问题
最新问题