【问题标题】:How do I change the theme in an AnyChart React tag cloud?如何更改 AnyChart React 标签云中的主题?
【发布时间】:2021-12-31 01:57:43
【问题描述】:

我正在使用 AnyChart 的 React 库创建标签云词云。如何更改它的颜色主题? answer found here 似乎不起作用:

import React from "react";
import ReactDOM from "react-dom";
import AnyChart from "anychart-react";
import anychart from "anychart";
anychart.theme("coffee");

var data = [
  { x: "learning", value: 80 },
  { x: "includes", value: 56 },
  { x: "lists", value: 44 },
  { x: "meaning", value: 40 },
  { x: "useful", value: 36 },
  { x: "different", value: 32 },
  { x: "grammar", value: 28 },
  { x: "teaching", value: 24 },
  { x: "example", value: 20 },
  { x: "thing", value: 12 }
];

// create a chart and set the data
var chart = anychart.tagCloud(data);
//chart.theme = anychart.palettes.coffee;

ReactDOM.render(
  <AnyChart width={800} height={600} instance={chart} title="Column chart" />,
  document.getElementById("root")
);

完整演示is here

【问题讨论】:

    标签: javascript reactjs word-cloud anychart tag-cloud


    【解决方案1】:

    如果您使用instance 属性,则可用。想法是使用通常的库 API 创建图表,然后将此实例应用于组件。在这种情况下,所有库功能都可以通过 API 使用。 所以,你可以使用这个调用

    chart.theme = anychart.palettes.coffee;
    

    在实例中。详情请查看the live sample

    【讨论】:

    • 这似乎不起作用。我在我的问题中也对此进行了评论,因为它不起作用。它适用于普通的 Javascript 库,但不适用于 React 库
    • 确保包含咖啡主题的 JS。
    • 我以为我在发布的演示中做到了,但也许我做错了。这是您的示例的修改版本,但它似乎也不起作用:codesandbox.io/s/react-example-forked-4vl50?file=/index.html
    • 主题 JS 文件是简单的自调用函数。它们不能通过 NPM 作为模块使用。将它们作为 JS 副作用 JS 脚本导入在 React 中不起作用。因此,您需要将所需的主题转换为模块。有关详细信息,请查看修改后的示例 - codesandbox.io/s/react-example-forked-dd9d3?file=/coffee.js
    猜你喜欢
    • 2020-03-18
    • 1970-01-01
    • 2013-04-28
    • 1970-01-01
    • 2023-02-16
    • 1970-01-01
    • 2015-09-20
    • 2017-10-10
    • 2018-03-17
    相关资源
    最近更新 更多