如何使用 ng2-charts 在圆环图上设置切口?

2023-12-14

我需要一些帮助来了解如何使用 ng2-charts 在我的圆环图上设置配置选项。特别是,我想在图表上设置剪切属性。我已经阅读了所有文档图表js and ng2-图表,但遗憾的是没有找到可行的解决方案。

控制台抛出的错误是

输入 '{ 选项:{ 切口:数字; }; }' 不可分配给类型 '_DeepPartialObject & DatasetChartOptions<...> & ScaleChartOptions<...>>'。

这是我的 html 和 ts 文件:

import {
  Component
} from '@angular/core';
import {
  ChartData,
  ChartType,
  ChartOptions
} from 'chart.js';
@Component({
  selector: 'app-summary-chart',
  templateUrl: './summary-chart.component.html',
  styleUrls: ['./summary-chart.component.scss']
})
export class SummaryChartComponent {

  // Doughnut
  doughnutChartType: ChartType = 'doughnut';
  doughnutChartLabels: string[] = ['Tickets', 'Free sales'];
  doughnutChartData: ChartData < 'doughnut' > = {
    labels: this.doughnutChartLabels,
    datasets: [{
      data: [60, 40],
      backgroundColor: ["#ef2c49", "#1c4d86"],
      rotation: 90,
    }, ],
  };

  // TODO resolve type ChartOptions not working
  doughnutChartOptions: any = {
    cutout: "70%"
  }

  // ---------------------------------------------------- THIS DOES NOT WORK
  public DonutChartOptions: ChartOptions = {
    options: {
      cutout: "70%"
    }
  };
}
<div class="chart-wrapper">
  <canvas baseChart [data]="doughnutChartData" [type]="doughnutChartType" [labels]="doughnutChartLabels" [options]="doughnutChartOptions"></canvas>
</div>

您需要指定ChartOptions它是针对甜甜圈的,如果你这样做,它就可以正常工作:

public DonutChartOptions: ChartOptions<'doughnut'> = {
  options: {
    cutout: "70%"
  }
};

TS 游乐场链接

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 ng2-charts 在圆环图上设置切口? 的相关文章

  • Angular2通用部署到apache远程服务器

    我在将 Web 应用程序部署到 Apache 远程服务器时遇到问题 我已经通过以下步骤部署了一个使用 RESTful API 服务 用 PHP 编写 托管在 public html api 的标准 Angular2 Web 应用程序 在项目
  • 未捕获的类型错误:无法读取未定义的属性“toLowerCase”

    我收到此错误 它源自 jquery 框架 当我尝试加载准备好的文档上的选择列表时 出现此错误 我似乎无法找到为什么会出现此错误 它适用于更改事件 但在尝试手动执行该函数时出现错误 未捕获的类型错误 无法读取未定义的属性 toLowerCas
  • 如何使用 JavaScript 将当前页面设置为 about:blank?

    我遇到的情况是服务器可能在当前地址上不可用 因此我想检测到这一点并将页面重定向到 about blank 页面 我该如何使用 JavaScript 来做到这一点 window location href about blank
  • 将随机字符串转换为十六进制颜色

    我的应用程序中有一个操作日志表 我想根据该条目的 sessionID 为行分配随机颜色 以帮助查看模式 分组操作 到目前为止我有这个 console log stringToColorCode mj3bPTCbIAVoNr93me1I fu
  • 匹配数组中的对象并合并

    UPDATE 我有一个名为的对象数组cars包含 li 标签 其中包含有关汽车的属性数据 例如价格 汽车类型等 我的目标是 如果这些汽车符合某些标准 则将它们合并到一个列表中 要求 快速性能 保持相同的汽车数组结构 Main Goal Ma
  • Angular.js:未捕获的错误,没有模块:myapp

    我也在尝试引导 angular js 项目 这是我的index html div p Loading p div
  • 通过 Javascript 将图像切割成碎片

    我正在创建一个简单的拼图游戏 为了做到这一点 我需要将我正在使用的图片切成 20 块 Javascript 有没有办法将一张图片切成 20 个相等的部分 并将它们保存为网页中的 20 个不同的对象 或者我只需要进入 Photoshop 自己
  • Office excel将CORS请求作为跨域请求

    我正在尝试从我的 Excel 插件发出跨域请求 正如这里所建议的 http dev office com docs add ins develop addressing same origin policy limitations http
  • 使用 javascript 禁用按钮:FF 与 IE

    我有一排按钮 它们都会创建一个我想在新选项卡中打开的 pdf 文件 这样按钮页面就会保持在顶部 并且 pdf 会打开以进行打印 为了防止单击按钮两次 我禁用该按钮 如下所示 我使用 python
  • 如何让Angular2绑定innerHTML中的组件

    我想创建一个组件myApp它将把控制器上的属性中的 HTML 嵌入到其模板中 但是 其中一些 HTML 可能包含其他组件选择器 import InfoComponent from Component selector myApp templ
  • 默认情况下嵌入带字幕的 Youtube 不起作用

    我正在尝试嵌入 Youtube 电影 并希望默认情况下打开字幕 From https developers google com youtube player parameters cc load policy https develope
  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无
  • mouseover 和 mouseout 事件在子进程上触发

    代码 div div div div 如果我将鼠标悬停在Navigation the Drop Downdiv 向下滑动 如果我将鼠标移开 它会向上滑动 问题是如果我将鼠标悬停在孩子上Drop Downdiv它也向上滑 动 有谁知道我该如何
  • Javascript 正则表达式来匹配正则表达式

    我正在研究一个特殊的正则表达式来匹配 javascript 正则表达式 现在我有这个正则表达式工作 i g m 例如 foo match i g m gt foo foo undefined foo i match i g m gt foo
  • Angular 2 runOutsideAngular 仍然改变 UI

    从我的理解来看runOutsideAngular https angular io docs ts latest api core index NgZone class html runOutsideAngular anchor 如果我需要
  • Javascript 中的线性回归 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在网络浏览器中用 Javascript 进行最小二乘拟合 目前 用户使用 HTML 文本输入输入数
  • 为什么 JSON 结果可以是布尔值而不是对象或数组?

    From JSON 网站 http json org JSON 建立在两种结构之上 名称 值对的集合 在各种语言中 这被实现为对象 记录 结构 字典 哈希表 键控列表或关联数组 值的有序列表 在大多数语言中 这被实现为数组 向量 列表或序列
  • 为什么从浏览器上传到 S3 时出现 403 错误?

    因此 我尝试查看此处之前的答案 但似乎没有任何效果 我正在使用 Dropzone 它似乎发出 OPTIONS 请求来获取所有允许的 CORS 相关信息 但它似乎没有正确返回 因此 通过查看 Chrome 开发工具 我有以下请求标头 Host
  • javascript:window.print() 打印 2 页,而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图
  • 允许使用 grunt browserify 进行全局转换

    我已将 jQuery 添加为 html 文件中的脚本标记 并将其添加到package json与一起工作browserify shim如下 browserify transform browserify shim browserify sh

随机推荐

  • 检测 QlistWidget 中某行是否单击了某个项目

    我被赋予了这个简单的任务 我有这个列表 每当单击 ok 时我都会插入项目 void Form ok 处理该事件应该将新的列表项添加到列表中 现在我无法做的是检测是否在某行单击了某个项目 然后根据该操作执行某些操作 这是我的代码 includ
  • Angular Material2 单击时更改按钮颜色

    我想在单击按钮时更改材质 mat mini fab 按钮的颜色 我的尝试如下 但不起作用
  • html select(下拉)控制asp.net中的选定索引更改事件

    当值更改时 我试图将后端代码放入我的 html 选择控件 下拉列表 中 以触发后端方法 但我找不到该事件 我尝试了这样的方法
  • 从在 gitlab CI 中不起作用的资源读取文件

    我在使用以下命令在 gitlab CI 上运行测试时遇到错误 gradlew clean test 我正在使用测试容器来运行我的测试 https www testcontainers org modules docker compose 这
  • 在Java中将PDF转换为Word [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 Java 可以将 PDF 转换为 Word 吗 我不是在谈论解析 PDF 文档 然后将其再次自定义渲染到 Word 我想要一个可以直接转换它的Jav
  • 在 Visual Studio 设计器中找不到自定义字体的 C# 文件

    我对 C 比较陌生 所以我的 WinForms 项目中几乎有一个包含自定义字体的文件夹 该字体在启动应用程序时工作得非常好 但在 Visual Studio 本身的实际设计器中 无法加载自定义控件 因为我在设计器中使用的路径不同 这是我用来
  • 如何从 png 图像的一行获取 x y 坐标并在闪亮的应用程序中使用它

    这是对此的后续问题在闪亮的应用程序中使用 sliderInput 为区域着色 假设我有这个图像 我如何将 ismirsehregal 的解决方案应用于这张图片 我想我必须把食道的x和y放到代码中 但我不知道如何获取食道的x和y 图中绿色 代
  • 需要一个 API 来检测 iPhone 何时插入

    我正在为 Mac 制作一个应用程序 我需要一个 API 来检测 iPhone 何时插入 谢谢 编辑 具体来说 我需要一个 API 来检测 iPhone 何时插入 Mac 上的 USB 端口 我没有完整的答案 但实现您想要的功能的程序是 US
  • C++:switch 语句在右大括号之前缺少分号

    为了未来读者的利益和我自己的理智 我想绝对清楚地表明 switch没有a的语句default案例 由于涵盖了所有案例 或顺序if elseif else最后的 else 不应执行任何操作 不得省略 并包含对此效果的注释 请参见示例 然而 每
  • 在 Oracle SQL 中处理日期

    我在使用 SQL 方面非常陌生 我尝试做的是仅使用月份和年份选择 waterUsage 和 electrcityUsage 并选择上一年的 waterUsage 和 electrcityUsage 然而 我似乎无法找出使用日期来完成这项工作
  • Swift:iOS 12.2 应用程序启动时崩溃

    更新 Xcode 和 swift 5 后 在 iOS 12 2 上启动模拟器后 我的应用程序在启动时崩溃 但在早期版本的 ios 如 12 0 中 应用程序可以正常工作 我在真实设备 ios 12 0 1 上启动应用程序并且应用程序正常工作
  • UITextView 应该检测链接,但否则应该将触摸传播到下面的视图

    我有一个文本视图 我想在其中检测链接 但是当触摸点处没有链接时 它应该将触摸传播到下面的视图 目前没有 它将包含在表格视图单元格中 如果用户点击链接 它应该进行交互 它可以工作 但是当点击另一个点时 它应该选择表格视图单元格 我需要文本不可
  • 如何使用win32com从word文档中按颜色获取文本?

    我有一个包含几个表格的word文档 每张桌子有两种颜色 黑色和红色 我想按颜色从 Word 文档表中的单元格中获取文本 我找到了一个方法 但我认为效率很低 以下代码从单词表单元格中获取文本 并用它的颜色打印每个单词 import os sy
  • 由于 .NET 运行时中的内部错误,该进程被终止

    我正在使用 WPF 不知何故今天我得到了这个新的崩溃信息 Description The process was terminated due to an internal error in the NET Runtime at IP 6A
  • 阻止 AlertDialog 在单击肯定按钮时关闭

    我正在尝试设置一个自定义 AlertDialog 它有 2 个按钮 取消按钮和肯定按钮 我需要做到这一点 以便单击肯定按钮后 我可以更改文本 而不关闭对话框 大致流程是肯定按钮会显示 发送 单击后它将更改为 发送 然后代码将向我们的服务器发
  • Android - 在外部应用程序中打开pdf

    我的应用程序资产目录中有一个 pdf 文件 我想使用外部应用程序打开该文件 因此编写了我的内容提供程序 我正在尝试使其工作 但没有任何结果 这是代码 内容提供商 package package name import java io Fil
  • Nuget ITfoxtec SAML 和 Angular

    我对 nuget 示例中描述的功能和我的案例 特别是 core 和 Angular 中描述的功能有疑问 我有一个带有 angular4 的前端 所有请求都通过那里 我用它重定向到 Idp 表格 他再次打电话给我 将断言传递给我 如何使用 A
  • 如何将字节数组转换为变体

    如何将字节数组转换为 Variant 我有一个 WebService 应该接收一个字节数组 但它只接受 VARIANT 类型的变量 我想知道如何转换以便将其作为 Web 服务的参数传递 谢谢 根据评论线索 您需要创建一个SAFEARRAY字
  • 当前的 Ruby 方法是通过 super 调用的吗?

    在运行时的方法中 有没有办法知道该方法是否已被调用super在子类中 例如 module SuperDetector def via super what goes here end end class Foo include SuperD
  • 如何使用 ng2-charts 在圆环图上设置切口?

    我需要一些帮助来了解如何使用 ng2 charts 在我的圆环图上设置配置选项 特别是 我想在图表上设置剪切属性 我已经阅读了所有文档图表js and ng2 图表 但遗憾的是没有找到可行的解决方案 控制台抛出的错误是 输入 选项 切口 数