mirror of
https://github.com/dart-lang/sdk
synced 2024-09-05 00:13:50 +00:00
pkg/js: moved example code to https://github.com/google/chartjs.dart/
R=jacobr@google.com Review URL: https://codereview.chromium.org/1449053004 .
This commit is contained in:
Kevin Moore
parent
871e4a2788
commit
87fc010974
|
|
@ -1,3 +1,11 @@
|
|||
## 0.6.0-beta.10
|
||||
|
||||
* Pointed to [Dart API for Chart.js](https://github.com/google/chartjs.dart/)
|
||||
and removed the local example.
|
||||
|
||||
## 0.6.0-beta.9
|
||||
|
||||
* Fixed examples in `README.md`.
|
||||
|
||||
## 0.6.0-beta.8
|
||||
* Updates to support recent changes in `Dart VM version: 1.13.0-dev.7.7`.
|
||||
|
|
|
|||
|
|
@ -20,7 +20,8 @@ If you are passing a Dart function to a JavaScript API, you must wrap it using
|
|||
|
||||
### Examples
|
||||
|
||||
There is a [full example](https://github.com/dart-lang/sdk/tree/master/pkg/js/example) hosted with the `package:js` source code.
|
||||
See the [Chart.js Dart API](https://github.com/google/chartjs.dart/) for an
|
||||
end-to-end example.
|
||||
|
||||
#### Calling methods
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1 @@
|
|||
An example of using [Chart.js](aoeU).
|
||||
|
||||
This example is ported from [this sample](https://github.com/nnnick/Chart.js/blob/b8691c9581bff0eeecb34f98e678dc045a18f33e/samples/line.html) in the `Chart.js` repository.
|
||||
|
||||
To view the example, run `pub serve example` from the root directory of this project – the directory containing `pubspec.yaml`.
|
||||
|
||||
```console
|
||||
> pub serve example
|
||||
Loading source assets...
|
||||
Serving js example on http://localhost:8080
|
||||
Build completed successfully
|
||||
```
|
||||
|
||||
You can view it with Dartium or any other browser.
|
||||
See the [Chart.js Dart API](https://github.com/google/chartjs.dart/) for a usage example.
|
||||
|
|
|
|||
|
|
@ -1,62 +0,0 @@
|
|||
// Copyright (c) 2015, the Dart project authors. Please see the AUTHORS file
|
||||
// for details. All rights reserved. Use of this source code is governed by a
|
||||
// BSD-style license that can be found in the LICENSE file.
|
||||
|
||||
library chart;
|
||||
|
||||
import 'dart:html';
|
||||
import 'package:js/js.dart';
|
||||
|
||||
@JS()
|
||||
class Chart {
|
||||
external Chart(CanvasRenderingContext2D ctx);
|
||||
|
||||
external dynamic Line(Data data, Options options);
|
||||
}
|
||||
|
||||
@JS()
|
||||
@anonymous
|
||||
class Data {
|
||||
external List get labels;
|
||||
external List<DataSet> get datasets;
|
||||
|
||||
external factory Data({List<String> labels, List<DataSet> datasets});
|
||||
}
|
||||
|
||||
/// Minimal implementation of dataset for line chart
|
||||
///
|
||||
/// http://www.chartjs.org/docs/#line-chart-data-structure
|
||||
@JS()
|
||||
@anonymous
|
||||
class DataSet {
|
||||
external String get label;
|
||||
external String get fillColor;
|
||||
external String get strokeColor;
|
||||
external String get pointColor;
|
||||
external String get pointStrokeColor;
|
||||
external String get pointHighlightFill;
|
||||
external String get pointHighlightStroke;
|
||||
|
||||
external List<num> get data;
|
||||
|
||||
external factory DataSet(
|
||||
{String label,
|
||||
String fillColor,
|
||||
String strokeColor,
|
||||
String pointColor,
|
||||
String pointStrokeColor,
|
||||
String pointHighlightFill,
|
||||
String pointHighlightStroke,
|
||||
List<num> data});
|
||||
}
|
||||
|
||||
/// Minimal implementation of options
|
||||
///
|
||||
/// http://www.chartjs.org/docs/#getting-started-global-chart-configuration
|
||||
@JS()
|
||||
@anonymous
|
||||
class Options {
|
||||
external bool get responsive;
|
||||
|
||||
external factory Options({bool responsive});
|
||||
}
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
// Copyright (c) 2015, the Dart project authors. Please see the AUTHORS file
|
||||
// for details. All rights reserved. Use of this source code is governed by a
|
||||
// BSD-style license that can be found in the LICENSE file.
|
||||
|
||||
library chart.example;
|
||||
|
||||
// Based off the Javascript example
|
||||
// https://github.com/nnnick/Chart.js/blob/b8691c9581bff0eeecb34f98e678dc045a18f33e/samples/line.html
|
||||
// On 2015-10-15
|
||||
|
||||
import 'dart:html';
|
||||
import 'dart:math';
|
||||
|
||||
import 'chart.dart';
|
||||
|
||||
void main() {
|
||||
var ctx = (querySelector('#canvas') as CanvasElement).context2D;
|
||||
|
||||
var rnd = new Random();
|
||||
|
||||
var data = new Data(labels: [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July"
|
||||
], datasets: <DataSet>[
|
||||
new DataSet(
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(220,220,220,1)",
|
||||
data: [
|
||||
rnd.nextInt(100),
|
||||
rnd.nextInt(100),
|
||||
rnd.nextInt(100),
|
||||
rnd.nextInt(100),
|
||||
rnd.nextInt(100),
|
||||
rnd.nextInt(100),
|
||||
rnd.nextInt(100)
|
||||
]),
|
||||
new DataSet(
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(151,187,205,0.2)",
|
||||
strokeColor: "rgba(151,187,205,1)",
|
||||
pointColor: "rgba(151,187,205,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(151,187,205,1)",
|
||||
data: [
|
||||
rnd.nextInt(100),
|
||||
rnd.nextInt(100),
|
||||
rnd.nextInt(100),
|
||||
rnd.nextInt(100),
|
||||
rnd.nextInt(100),
|
||||
rnd.nextInt(100),
|
||||
rnd.nextInt(100)
|
||||
])
|
||||
]);
|
||||
|
||||
new Chart(ctx).Line(data, new Options(responsive: true));
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Chart.js and Dart interop example</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
|
||||
<script type="application/dart" src="chart_js_example.dart"></script>
|
||||
<script src="packages/browser/dart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="margin: 20px;">
|
||||
<canvas id="canvas" height="450" width="600"></canvas>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
name: js
|
||||
version: 0.6.0-beta.9
|
||||
version: 0.6.0-beta.10
|
||||
authors:
|
||||
- Dart Team <misc@dartlang.org>
|
||||
description: Access JavaScript from Dart.
|
||||
homepage: https://github.com/dart-lang/sdk/tree/master/pkg/js
|
||||
environment:
|
||||
sdk: '>=1.13.0-dev.7.7 <2.0.0'
|
||||
sdk: '>=1.13.0-dev.7.8 <2.0.0'
|
||||
dev_dependencies:
|
||||
browser: '^0.10.0+2'
|
||||
|
|
|
|||
Loading…
Reference in a new issue