Retyped.chartist 用法不清楚。如何创建基本折线图？答案

【问题标题】：Retyped.chartist usage unclear. How do I create a basic line chart?Retyped.chartist 用法不清楚。如何创建基本折线图？
【发布时间】：2019-06-07 05:21:15
【问题描述】：

我使用的是 bridge.NET 和 Retyped，我有 Chartist 作为 js 库，并且我在 Visual Studio 中有 Retyped.chartist 作为 nuget 包（这会将 c# 代码映射到 js 库）。当我运行网站时，该库已加载。但我的代码不起作用：

chartist.Chartist2.Line.New(newUsersChart, new Chartist.IChartistData
        {
            labels = arr,
            series = arr2
        });

错误是 Chartist2 未定义。试图访问未定义的线路。我尝试通过重新键入的映射查看，但没有运气。没有在互联网上找到有关此特定场景的任何信息...

【问题讨论】：

标签： javascript c# bridge chartist.js bridge.net

【解决方案1】：

我安装了 Bridge CLI，并使用以下命令创建了一个演示项目（在 Mac 上）：

mkdir demo1
cd demo1
bridge new
bridge add package retyped.chartist
bridge build
bridge run
code .

对code . 的调用会在 Visual Studio Code 中打开项目。

在 Program.cs 中，我使用了以下 C#：

using System;
using Bridge;
using Retyped;
using static Retyped.chartist;

namespace Demo
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var data = new Chartist.IChartistData
            {
                labels = new es5.Array<string>("Mon", "Tue", "Wed", "Thu", "Fri"),
                series = new es5.Array<es5.Array<double>>(new es5.Array<double>(5, 2, 4, 2, 0 ))
            };

            var options = new Chartist.ILineChartOptions
            {
                width = 300,
                height = 200
            };

            Chartist2.Line.New(".ct-chart", data, options);
        }
    }
}

不是最干净或最明显的 C#，但它是当前运行该程序所需的。希望在未来的某个时候，Retyped 可以改进 C# 以允许使用更自然和常见的 C# 类，例如匿名对象和基本 C# 数组。

此演示基于 Chartist Getting Started 文档中提供的示例。

项目 bridge.json 文件中还需要以下 loader 配置部分：

"loader": {
  "manualLoading": "true",
  "skipManualVariables": "true"
}

在 /dist 文件夹中，然后我创建了一个新的 demo.html 文件并添加了以下内容：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.8/chartist.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.8/chartist.js"></script>

    <script src="bridge.js"></script>
    <script src="demo1.js"></script>
  </head>
  <body>
    <div class="ct-chart ct-perfect-fourth"></div>
  </body>
</html>

重建项目。

如果您返回浏览器并查看 demo.html，Chartist 图表应该会正确呈现。

希望这会有所帮助。

【讨论】：