个人中心
gpt4 book ai didi

dart - 运行Chartjs Dart示例

转载 作者：行者123 更新时间：2023-12-03 03:02:31 27 4
gpt4 key购买 nike

我正在尝试运行dart端口的chartjs示例，但似乎无法正常工作。
看到带有错误消息的屏幕截图。

知道哪里出了问题吗？谢谢

该示例的源代码可以下载Chartjs Dart port Example

lib / chart.dart来源:

library chart;

import 'dart:html';
import 'dart:math' as math;
import 'package:intl/intl.dart';

part 'src/base.dart';
part 'src/line.dart';
part 'src/bar.dart';
part 'src/bool.dart';
part 'src/animation.dart';

示例/web/chart.html 

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Chart</title>
    <link rel="stylesheet" href="chart.css">
    <script type="application/dart" src="chart.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </head>
  <body>
  </body>
</html>

示例/web/chart.dart 

library chart;

import 'dart:html';
import 'package:chart/chart.dart';


void main() {


  Line chart = new Line({
    'labels' : ["January","February","March","April","May","June","July","August"],
    'datasets' : [
                {
                  'fillColor' : "rgba(220,20,20,0.5)",
                  'strokeColor' : "rgba(0,0,0,1)",
                  'pointColor' : "rgba(220,220,220,1)",
                  'pointStrokeColor' : "#f00",
                  'data' : [1,4,5,2,5,6,3,7]
                },
                {
                  'fillColor' : "rgba(151,187,205,0.5)",
                  'strokeColor' : "rgba(151,187,205,1)",
                  'pointColor' : "rgba(151,187,205,1)",
                  'pointStrokeColor' : "#fff",
                  'data' : [3,-1,0,4,4,-2,4,1]
                },
                {
                  'fillColor' : "clear",
                  'strokeColor' : "rgba(151,187,205,1)",
                  'pointColor' : "rgba(151,187,205,1)",
                  'pointStrokeColor' : "#fff",
                  'data' : [-3,-3,-1,-4,-4,-3,-4,-1]
                }
    ]
  }, {
    'scaleOverride' : true, 
    'scaleMinValue' : 0.0, 
    'scaleMaxValue' : 35.0, 
    'scaleStepValue' : null, 
    'bezierCurve' : true, 
    'animation' : false,
    'titleText' : 'testest'     
    });


  Line chart2 = new Line({
      'labels' : ["1","2","3","4","5","6","7","8","9"],
      'datasets' : [
                  {
                    'fillColor' : "rgba(123,244,220,0.5)",
                    'strokeColor' : "rgba(220,220,220,1)",
                    'pointColor' : "rgba(220,220,220,1)",
                    'pointStrokeColor' : "#fff",
                    'data' : [1,1,0,0,1,1,1,0]
                  }
      ]

    }, {
      'animationEasing': 'easeOutElastic',
      'animation' : true,
      'bezierCurve' : true, 
      }
    );

  Bool chartBool = new Bool({
      'labels' : ["Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag","Sonntag"],
      'datasets' : [
                  {
                    'strokeColor' : "rgba(255,10,10,1)",
                    'data' : [{'x':0, 'y':0},{'x':2, 'y':0},{'x':3, 'y':1},{'x':20, 'y':0},{'x':30, 'y':0},{'x':40, 'y':0},{'x':45, 'y':0},{'x':63, 'y':0},{'x':100, 'y':0},{'x':123, 'y':1},{'x':128, 'y':0},{'x':130, 'y':0}]
                  }
                  ]

    }, {
      'animationEasing': 'easeOutElastic',
      'animation' : true
      }
    );

  Bar bar = new Bar({
                      'labels' : ["January","February","March","April","May","June","July"],
                      'datasets' : [
                                  {
                                    'fillColor' : "rgba(220,220,220,0.5)",
                                    'strokeColor' : "rgba(220,220,220,1)",
                                    'data' : [65,59,90,81,56,55,40]
                                  },
                                  {
                                    'fillColor' : "rgba(255,255,255,1)",
                                    'strokeColor' : "rgba(0,0,255,0.5)",
                                    'data' : [28,48,40,19,null,27,100]
                                  }
                                  ]

  }, null);

  Bar bar2 = new Bar({
                      'labels' : ["January","February","March","April","May","June","July"],
                      'datasets' : [
                                  {
                                    'fillColor' : "rgba(220,220,220,0.5)",
                                    'strokeColor' : "rgba(220,220,220,1)",
                                    'data' : [55,59,90,59,56,55,60]
                                  }]

  }, 
  {
    'titleText' : 'testest'     
  });

  DivElement containerBool = new DivElement();
  containerBool.style.height ='400px';
  containerBool.style.width =  '100%';
  document.body.children.add(containerBool);
  chartBool.show(containerBool);

  DivElement container = new DivElement();
  container.style.height ='400px';
  container.style.width =  '100%';
  document.body.children.add(container);
  chart.show(container);

  DivElement container2 = new DivElement();
  container2.style.height ='400px';
  container2.style.width =  '100%';
  document.body.children.add(container2);
  chart2.show(container2);

  DivElement container3 = new DivElement();
  container3.style.height ='400px';
  container3.style.width =  '100%';
  document.body.children.add(container3);
  bar.show(container3);

  DivElement container4 = new DivElement();
  container4.style.height ='400px';
  container4.style.width =  '100%';
  document.body.children.add(container4);
  bar2.show(container4);


}

最佳答案

这显然是示例中的错误。也许库已更改，示例尚未在新版本中进行测试。

如果您将两个值添加到 map ，则可以

 Bool chartBool = new Bool({
      'labels' : ["Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag","Sonntag"],
      'datasets' : [
                  {
                    'name': 'bla',
                    'date': 'somedate',
                    'strokeColor' : "rgba(255,10,10,1)",

我只添加了两行 name': 'bla'和 'date': 'somedate'。看起来这些值仅用作工具提示，内容与克服异常无关紧要。

关于dart - 运行Chartjs Dart示例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28300879/

27 4 0
文章推荐： unit-testing - Dart pub构建:dart版本和已编译js版本之间的一致性
文章推荐： dart - 如何构建一个简单的 Dart Web 应用程序
文章推荐： dart - StageXL 鼠标事件不起作用
文章推荐： dictionary - 在 Dart 中减少/过滤 map 的首选方法？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com