程序员经验分享-hwhale

Google Charts LineChart 自定义点

2023-11-29

是否可以添加一个自定义点形状到折线图?

谷歌的自定义点文档没有提及任何有关添加他们尚未提供的形状的内容。

我确实找到了这个类似的问题有一个很好的答案，但我不认为我可以使用 angular-google-chart 做到这一点。即使有可能，我也希望有一个更直接的解决方案。

我不需要添加复杂的形状，我只需要一个空心圆 and an X.

我尝试使用描边颜色和描边宽度添加空心圆作为列样式，但我什至无法使其工作。

这里有一个jsFiddle 与工作空心圆但我使用 Javascript Literal 方式添加数据，但无法让以下代码工作：

chartData.data.cols = [
        {
            id: "someid",
            label: "Some Label",
            type: "number",
            p: {
                style: 'point {stroke-width: 4; stroke-color: #000000',
            },
        },
    ];

我宁愿将其添加到options.series[0].行程宽度但看起来这不是一个选择。

因此，如果您能提供空心圆点或 X 的帮助，那就太棒了！


基本上：当您想应用自定义样式时，您必须使用样式列，样式将通过列的值设置。

使用对象文字的示例：

google.setOnLoadCallback(drawChart);

function drawChart() {
  var chartData = {

    data: {

      cols: [{

          label: "X",
          type: "number"
        }, {
          label: 'Y',
          type: "number"
        }, {
          role: 'style',
          type: "string"
        }

      ],
      rows: [{
        c: [{
          v: 1
        }, {
          v: 5
        }, {
          v: 'point { stroke-width: 4; fill-color: transparent; stroke-color: red;}'
        }]
      }, {
        c: [{
          v: 2
        }, {
          v: 1
        }, {
          v: 'point { stroke-width: 4; fill-color: transparent; stroke-color: red;}'
        }]
      }, {
        c: [{
          v: 3
        }, {
          v: 3
        }, {
          v: 'point { stroke-width: 4; fill-color: transparent; stroke-color: red;}'
        }]
      }]
    }
  };
  
  var options = {
    legend: 'none',
    curveType: 'function',
    pointSize: 7

  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(new google.visualization.DataTable(chartData.data), options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart_div"></div>

如果您使用多个 vaxes，则在要设置样式的列之后立即添加带有 role: 'style' 的列。

另一个解决方案：

通过 CSS 设置圆圈的样式：

google.setOnLoadCallback(drawChart);

function drawChart() {
  var chartData = {

    data: {

      cols: [{

          label: "X",
          type: "number"
        }, {
          label: 'Y',
          type: "number"
        }, {
          label: 'Y',
          type: "number"
        }

      ],
      rows: [
             {c:[{v:1}, {v:5}, {v:4}]},
             {c:[{v:2}, {v:1}, {v:2}]},
             {c:[{v:3}, {v:3}, {v:5}]}
            ]
    }
  };


  var options = {
    curveType: 'function',
    pointSize: 7,
    series: {
      //set unique colors for the series when you must set
      //different points for mmultiple series
      0: {
        color: 'ff0000'
      },
      1: {
        color: '#0000ff'
      }
    }

  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(new google.visualization.DataTable(chartData.data), options);
}
#chart_div circle {
  stroke-width: 4px !important;
  fill: none !important;
}
#chart_div circle[fill="#ff0000"] {
  stroke: #ff0000 !important;
}
#chart_div circle[fill="#0000ff"] {
  stroke: #0000ff !important;
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart_div" ></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

angularJS

googlevisualization

Google Charts LineChart 自定义点 的相关文章

  • XmlHttpRequest CORS POST 发送时不带 cookie

    我有一个 Rails 服务为我的 AngularJS 前端应用程序返回数据 该服务配置为通过返回足够的标头来允许 CORS 请求 当我发出 GET 请求来接收数据时 会发送 CORS 标头 以及我之前在登录时收到的会话 cookie 您可以

  • AngularJs 从自身调用内部服务函数

    我构建了一个发出多个请求的简单服务 该服务有两种方法 我无法从服务内的另一种方法调用一种方法 Plunkr http plnkr co edit 2fERik4uTxbxlVOhncMd p preview http plnkr co ed

  • ng-bootstrap ngbDropdown 在 Angular 4 中不起作用

    在我的 Angular 4 应用程序中 ng bootstrap 中的 ngbDropdown Element 不起作用 对于这种情况 我安装了以下 npm 模块 ng bootstrap ng bootstrap 1 0 0 alpha

  • 角度 ui 路由器的动态参数

    我想知道在更改状态并发送请求以从后端获取模板时如何包含参数 这是我的应用程序 angular module questionnaireApp ngAnimate ui router ui bootstrap config stateProv

  • Angularjs 抛出 TypeError：无法读取未定义的属性“indexOf”

    我正在尝试调试上面的代码 我觉得这非常有用 gt 我什至找不到代码中的问题 也不知道从哪里开始 因为 Angularjs 对我来说仍然很新 我正在尝试本地化 Angularjs 应用程序 我知道为了获得帮助而缺少很多上下文 但我正在尝试查看

  • 访问指令的范围与嵌入内容隔离

    我不确定这是否真的可能 但我本质上想要 AngularJS 中 隔离范围的反转 这里有一个Plunkr http plnkr co edit 3xL5MrdJSfYH22ivkYJS展示 基本上 我设置了一个自定义指令来提供一些可重用的 H

  • 如何创建自定义输入类型？

    例如 我想创建一个类似于 AngularJS 实现 电子邮件 的方式的自定义输入类型

  • 添加甜蜜警报 Angular js

    我是 AngularJS 的新手 我正在尝试使用来自https github com oitozero ngSweetAlert https github com oitozero ngSweetAlert 我已经将相应的脚本添加到我的in

  • 如何使用 $http.get 获取 304 状态代码？

    如何使用 http get 获取 304 状态代码 http get menu json success function data status headers scope menu data console log status sho

  • 将行推入使用 ng-repeat 以角度呈现的表格中

    当客户端单击该行时 我想在表中插入额外的行 不应预取数据 因为我预计最多有 30 行 但每行都有关联的数据 在一次获取中获取这些数据是不合理的 到目前为止 我的方法是使用 ng repeat 迭代我的集合并渲染表格 当客户端按下该行时 客户

  • 当数据表输入来自服务器的 JSON 数据时，更改 Google 图表栏颜色

    我一直在努力使用谷歌图表 API 我在 SO 上发现了这个出色的例子PHP MySQL Google Chart JSON 完整示例 https stackoverflow com questions 12994282 php mysql

  • AngularJS 插值错误

    我正在显示房间的属性 作为我正在开发的房间管理应用程序的一部分 这是输出 如您所见 Beamer 英文投影仪 的值为 Sony lamp 01 12 2013 此输出是正确的 但当我打开控制台时 我看到一些有关插值的错误 更大的分辨率 Ca

  • 单元测试依赖注入

    我对茉莉花和业力是全新的 我相信我的环境设置正确 并且我能够运行非常基本的单元测试 但是一旦我尝试实例化控制器 我就会收到未知提供程序错误 并且我不确定如何调试它 我需要传入 stateProvider 依赖项吗 我在角种子示例中没有看到这

  • Angularjs 手表服务对象

    为什么我无法观看服务中的对象 我有一个简单的变量可以工作 但是一个对象不能工作 http plnkr co edit S4b2g3baS7dwQt3t8XEK p preview http plnkr co edit S4b2g3baS7d

  • 以角度选择项目后保持菜单打开

    单击我的菜单后 我的菜单将关闭toggleShare按钮 我怎样才能防止这种情况 我将 angularJS 与 Angular 材料一起使用 这是我的代码

  • 根据用户区域设置过滤字符串列表

    当使用 AngularJS 1 6 处理 JavaScript 项目时 我有一个要过滤的字符串列表 例如 假设我的列表包含 rbol cig e a nido and tubo 当过滤西班牙语字符串时 如果我过滤 u 我会期望两者cig e

  • 如何使用有角度的材料创建卡片网格？

    我正在尝试使用 ng repeat 创建每行三张卡片的网格 我有一个普通的 javascript 对象数组附加到范围 下面的代码将为每张卡创建一个新行 div div

  • 使用 JS 在 Angular 中创建删除按钮的确认警报

    我有一个带有删除按钮的表单 我想创建一个单击删除按钮时弹出的确认框 删除按钮当前有效 我在 javascript 中尝试了一些方法 但没有成功 我正在使用角度 这是最好的方法吗 另外 有谁知道这方面的任何例子 我还没有找到任何有效的例子 d

  • 如何制作没有 ng-repeat 的模板并使用 Angular-drag-and-drop-lists 将数据传递到 $scope？

    我想用角度拖放列表 https github com marceljuenemann angular drag and drop lists使用我自己的网格模板到所见即所得编辑器 如何构建我自己的 HTML 模板而不需要ng repeat因

  • 如何在 angular-ui 中动态禁用 ui-sortable 指令

    我正在使用 Angular ui 使用 ui sortable 指令进行排序 是否可以根据范围状态动态启用 禁用可排序功能 因此 我需要一个按钮来更改范围属性的状态 并且根据此属性可排序是否应该工作 角度指令支持观察可排序选项何时发生变化

随机推荐

  • 实体框架 - 数据库优先，无需配置

    我正在开发一个使用 EF 处理现有数据库的类库 我想避免类库 和 exe 或网站 的使用者在 config 文件中包含实体连接字符串 我想要连接字符串设置一个运行时 如何使用数据库优先方法设置连接字符串 没有需要连接字符串的构造函数重载 当

  • Redshift 创建表无法通过 Python 工作

    As per 使用 IAM 角色凭证通过 Python 卸载到 S3 卸载语句完美运行 我尝试过的其他命令也是如此 例如复制和选择语句 但是 我也尝试运行一个创建表的查询 创建表查询运行时没有错误 但是当它到达 select 语句时 它会抛

  • Javascript - 按多个条件对数组进行排序

    我有一个对象数组 var arr title 50 50 title 100 100 title 50 65 title 100 125 我正在尝试对此数组进行排序 以便项目按以下顺序显示 var arr title 50 50 title

  • Android Webview rem 单位缩放方式以适应盒子

    编辑 此错误是 Webview 覆盖默认的最小字体大小 在我的示例中 Webview 在某处将最小字体大小设置为 8px 解决方案如下 Android Webview rem 单位可缩放到很大 所有 rem 单位在 Android Webv

  • 具有嵌套类型的 XAML DataContext DesignInstance

    是否可以在 XAML 中为 d DesignInstance 指定嵌套类型 如果是这样 怎么办 如果我有以下类结构 namespace MyApp public class OuterClass public class InnerClas

  • android：将图像保存到SD卡中的特定文件夹

    我这里有一个在 SD 卡上保存位图的代码片段 String filename String valueOf System currentTimeMillis ContentValues values new ContentValues va

  • OnDataChanged 永远不会被调用

    我正在尝试 dataitem APi 这是我的代码 mGoogleApiClient new GoogleApiClient Builder this addConnectionCallbacks new GoogleApiClient C

  • 为什么下面的“std::transform”示例需要函数指针而不是函数对象？

    函数模板std transform 获取一个范围 使用运算符对其进行组件式操作 并将结果保存在另一个范围中 在下面的示例中 该函数采用泛型std initializer list called nl并对其进行操作 std string T

  • 带 CSS 的浮动标签在 Edge、Internet Explorer 中不起作用

    我使用 Css 制作了浮动标签输入字段 它可以在 chrome firefox 上正常工作 但不能在 Internet Explorer 和 Edge 上工作 所有其他浏览器在未聚焦时显示的输入字段与第一张图像中所示相同 而在聚焦时则与第二

  • 如何传递对字符串的引用？

    我读过的所有内容scanf gets and fgets是它们有问题 带有空白 溢出或复杂性 我正在学习 C 课程简介 因为我有足够的 Java 和其他语言编程经验 所以我有信心这样做 所以我决定创建自己的函数来获取用户使用的字符串输入ge

  • 涉及 group by 和 join 的 SQL 查询

    我无法在标题部分更具体 但我想为我做一些有点复杂的事情 我以为我做到了 但事实证明这是有问题的 我有以下三个表 项目表 id项目 title idOwner 报价表 idOffer id项目 帐号 负责任的 帐号 Username Now

  • 我可以阻止接口的实现吗？

    我有以下情况 public interface A void doSomethingCool public interface B extends A void doSomethingVeryBCool public interface C

  • 等待用户完成 JavaScript 中 blob 的下载

    在 Javascript 中 我创建了许多 blob 我想提示用户将它们另存为文件 目前 我正在使用URL createObjectURL 将 URL 放入链接中 并模拟对该链接的点击 当然我打电话URL revokeObjectURL释放

  • 从 DWORD 到 64 位指针的类型转换警告

    旧的 32 位 C 应用程序 MS Visual Studio 的代码行如下 m value PUCHAR someDWORD 其中 PUCHAR 是指向无符号字符的指针 现在我已更改为 64 位 并且收到有关从 DWORD 转换为 64

  • RequireJS：为什么相对路径适用于define()，但不适用于require()？

    假设您有以下目录结构和以下文件 root require jquery js folder index html main js AnotherModule js 在 RequireJS 中 当您引用以 开头的模块时 RequireJS 会

  • 是否可以使用 PowerShell 获取 Azure 订阅优惠或 OfferId？

    是否可以使用 Powershell 获取 Azure 订阅优惠或 OfferId 通过门户 这将是订阅 gt 属性 gt 优惠或优惠 ID 我找了好久了 还是没看到 Thanks 现在可以使用资源图形浏览器通过类似于以下的查询从门户完成此操

  • 如何读取本地xml文件作为android中的输入流资源文件夹？

    我正在尝试从类似的东西获取输入流 InputSource myInputSource new InputSource activity getResources openRawResource com MYCLass R xml progr

  • 在邮递员帖子请求中发送地图

    当我希望它使用 RequestBody 注释直接映射到我的 Java pojo 时 我找不到关于如何在 json 帖子中格式化地图的好答案 我假设 json 看起来像这样 myInt 10 myMap 1 A 我的 pojo 会有一个myI

  • JS 代码在 codepen 上运行缓慢，但在本地运行良好

    我已经为无与伦比的井字游戏实现了极小极大算法 极小极大算法是递归的 执行大迭代 这对计算机来说并不大 只对人类来说大 第一步在 codepen 上执行大约需要 3 秒 但在我的本地计算机上立即执行 怎么了 我的代码效率不高吗 或者是code

  • Google Charts LineChart 自定义点

    是否可以添加一个自定义点形状到折线图 谷歌的自定义点文档没有提及任何有关添加他们尚未提供的形状的内容 我确实找到了这个类似的问题有一个很好的答案 但我不认为我可以使用 angular google chart 做到这一点 即使有可能 我也希

热门标签