asp.net-core - 将文本放置在 ChartJS 的图表 Canvas 区域中

标签 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03606b6271772d697043312d3b2d33" rel="noreferrer noopener nofollow">[email protected]</a>"></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, 高度 * .70);可以是这样的: ctx.fillText("s(A)", 2005, 3); (2015,9)属于chartjs坐标系。

我的目标: s(A) 可以在 Chartjs 区域的 (2005,3) 处看到 s(A)可以在chartjs区域上看到(2015,9)

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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2a1aaa3b0b6eca8b182f0ecfaecf2" rel="noreferrer noopener nofollow">[email protected]</a>"></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>

最佳答案

一个工作示例:

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>

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

更新:(注册插件)

如果您全局注册一个插件，则必须在此处禁用您不希望其运行的每个图表中的插件。

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 的函数，它将把给定值从该轴转换为其像素位置。

关于asp.net-core - 将文本放置在 ChartJS 的图表 Canvas 区域中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55950872/

上一篇：cordova - Electron Builder Appx 未在 Windows 商店上验证

下一篇：php - 添加一个复选框作为 Woocommerce 管理产品选项，隐藏相关产品

相关文章：

javascript - VML非零绕组

html - 鼠标悬停在 Canvas 上的图像替换

c# - ASP.NET Core 2.2 防止对文档/文件的直接 URL 访问

asp.net - OnModelCreating 在 Entity Framework 7 中未定义

ASP.NET 核心 2 : Model bound complex types must not be abstract or value types and must have a parameterless constructor

javascript - 用JS设置元素宽度超过html innerWidth

Windows 7 上 IE 9 中的 HTML 5 Canvas 性能

javascript - 旋转 Canvas 上的点而不调用 native 变换函数

javascript - 在 html Canvas 中从线 Angular 和 x 正轴创建基于圆

javascript - 使用 Angular Js 上传文件夹

©2024 IT工具网  联系我们