datacharts
来源:互联网 发布:汉王pdf ocr mac版 编辑:程序博客网 时间:2024/06/03 20:19
```python
#这是一个Demo
import charts
series = [{
'type': 'pie',
'name': 'Browser share',
'data': [
['Firefox', 45.0],
['IE', 26.8],
{
'name': 'Chrome',
'y': 12.8,
'sliced': True,#控制是否脱离整个pie
'selected': True #http://api.highcharts.com/highcharts/plotOptions.pie
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
charts.plot(series, options={'title': {'text': 'A pie chart'}}, show='inline')
```
<style>body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#555;font-family:sans-serif}
small{font-weight:400;display:block;font-size:14px}
code{background-color:#d3d3d3;border-radius:3px;font-family:monospace;padding:0 .5em}
.icon.-facebook:before,.icon.-linkedin:before,.icon.-pinterest:before,.icon.-twitter:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Post-Creator-Icons;font-style:normal;font-variant:normal;font-weight:400;line-height:1;speak:none;text-transform:none}
@font-face{font-family:Post-Creator-Icons;src:url(fonts/Post-Creator-Icons.eot);src:url(fonts/Post-Creator-Icons.eot?#iefix) format('embedded-opentype'),url(fonts/Post-Creator-Icons.woff) format('woff'),url(fonts/Post-Creator-Icons.ttf) format('truetype'),url(fonts/Post-Creator-Icons.svg#Post-Creator-Icons) format('svg');font-weight:400;font-style:normal}
.icon.-facebook:before{content:"\e001"}
.icon.-linkedin:before{content:"\e002"}
.icon.-pinterest:before{content:"\e003"}
.icon.-twitter:before{content:"\e004"}
.social-icons h4{display:inline-block;margin:20px 10px 0 0}
.social-icons .icon{display:inline-block;margin:0 5px}
body.modal-open{overflow:hidden}
.jsoneditor table,.jsoneditor td,.jsoneditor td.tree,.jsoneditor tr{border:none;margin:0}</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.default.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.0/jsoneditor.min.css"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-10">
<input type="text" id="variable-selector">
</div>
<div class="col-sm-2">
<button class="btn btn-default pull-right" type="submit" id="settings-button">Settings</button>
</div>
</div>
<div class="row">
<div class="collapse col-xs-12" id="settings-collapse">
<div class="panel panel-default" style="margin-top: 20px">
<div class="panel-heading"><h3 class="panel-title">Adjust chart settings</h3></div>
<div class="panel-body">
<div class="row">
<div id="jsoneditor" class="col-md-12" style="height: 350px"></div>
</div>
<div class="row" style="margin-top: 10px">
<div class="col-sm-4">
<button type="button" class="btn btn-primary" id="save-settings">
Apply changes
</button>
</div>
<div class="col-sm-8 text-right ">
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="options-input"
placeholder="settings" style="text-align: right">
<div class="input-group-addon"><strong>.json</strong></div>
</div>
</div>
<button type="submit" class="btn btn-primary" id="options-button">Save</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="chart-container" style="min-width: 310px;"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.18/require.min.js"></script>
<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
//findIndex polyfill
if (!Array.prototype.findIndex) {
Array.prototype.findIndex = function(predicate) {
if (this == null) {
throw new TypeError('Array.prototype.findIndex called on null or undefined');
}
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
var list = Object(this);
var length = list.length >>> 0;
var thisArg = arguments[1];
var value;
for (var i = 0; i < length; i++) {
value = list[i];
if (predicate.call(thisArg, value, i, list)) {
return i;
}
}
return -1;
};
}
if (!Array.prototype.filter) {
Array.prototype.filter = function(fun/*, thisArg*/) {
'use strict';
if (this === void 0 || this === null) {
throw new TypeError();
}
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== 'function') {
throw new TypeError();
}
var res = [];
var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
for (var i = 0; i < len; i++) {
if (i in t) {
var val = t[i];
// NOTE: Technically this should Object.defineProperty at
// the next index, as push can be affected by
// properties on Object.prototype and Array.prototype.
// But that method's new, and collisions should be
// rare, so use the more-compatible alternative.
if (fun.call(thisArg, val, i, t)) {
res.push(val);
}
}
}
return res;
};
}
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
Array.prototype.equals = function (array) {
// if the other array is a false value, return
if (!array)
return false;
// compare lengths - can save a lot of time
if (this.length != array.length)
return false;
for (var i = 0, l = this.length; i < l; i++) {
// Check if we have nested arrays
if (this[i] instanceof Array && array[i] instanceof Array) {
// recurse into the nested arrays
if (!this[i].equals(array[i]))
return false;
}
else if (this[i] != array[i]) {
// Warning - two different object instances will never be equal: {x:20} != {x:20}
return false;
}
}
return true;
};
},{}]},{},[1]);
</script>
<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
requirejs.config({
"paths": {
"highstock": "https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.5/highstock",
"export": "https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.5/modules/exporting",
"more": "https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.7/highcharts-more",
"jsoneditor": "https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.0/jsoneditor.min",
"selectize": "https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min",
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min"
},
"shim": {
"export": ["highstock"],
"more": ["highstock"]
}
});
//Define jquery here to use the pre-loaded version
define('jquery', [], function() {
return jQuery;
});
},{}]},{},[1]);
</script>
<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
//Count the number of charts on the page
if (window.counter == undefined) {
window.counter = 0;
} else {
window.counter++;
}
requirejs([
'jquery',
'selectize',
'jsoneditor',
'highstock',
'export',
'more'
], function ($, selectize, JSONEditor) {
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
var id = guid();
plot(id);
function plot(id) {
var series = [
{data: [1, 2, 4, 9], name: "temperature 1", display: true, color: '#2b908f'},
{data: [9, 4, 2, 1], name: "temperature 2", display: true},
{data: [0, 3, 5, 6], name: "temperature 3", display: false}
];
var series = [{"data": [["Firefox", 45.0], ["IE", 26.8], {"y": 12.8, "selected": true, "name": "Chrome", "sliced": true}, ["Safari", 8.5], ["Opera", 6.2], ["Others", 0.7]], "name": "Browser share", "type": "pie", "display": true}]
var options = {};
var options = {"height": 400, "type": "line", "width": "auto", "scale": 2, "title": {"text": "A pie chart"}, "chart": {"type": "line"}}
var useHighStock = false;
var useHighStock = false
var save = 'app/chart.svg';
var save = false
var url = 'http://127.0.0.1:65079';
var url = "http://127.0.0.1:50319/"
var settingsFile = 'settings';
var settingsFile = "settings"
var scale = options.scale;
//Create different containers for the charts
var chartContainer = document.getElementById("chart-container");
chartContainer.id = "chart-container" + id;
chartContainer.style.height = options.height.toString() + 'px';
if (options.width != 'auto') {
chartContainer.style.width = options.width.toString() + 'px';
}
var selector = $("#variable-selector");
selector.attr('id', "variable-selector" + id);
var settings = $("#settings-collapse");
settings.attr('id', "settings-collapse" + id);
var button = $("#settings-button");
button.attr('id', "settings-button" + id);
var saveButton = $("#save-settings");
saveButton.attr('id', "save-settings" + id);
var optionsInput = $("#options-input");
optionsInput.attr('id', "options-input" + id);
optionsInput.val(settingsFile);
var optionsButton = $("#options-button");
optionsButton.attr('id', "options-button" + id);
// create the editor
var editorContainer = document.getElementById("jsoneditor");
editorContainer.id = "jsoneditor" + id;
var editor = new JSONEditor(editorContainer);
button.on('click', showSettings);
saveButton.on('click', applyOptions);
optionsButton.on('click', saveOptions);
function applyOptions() {
var newOptions = editor.get();
setOptions(newOptions);
settings.collapse('hide');
}
function saveOptions(event) {
event.preventDefault();
applyOptions();
var options = chart.options;
delete options.exporting;
var name = optionsInput.val() ? optionsInput.val() + '.json' : 'settings.json';
options['settingsFile'] = name;
$.ajax({
type: "POST",
url: url,
data: JSON.stringify({
options: options,
name: name
})
});
}
function showSettings() {
settings.collapse('toggle');
}
//Choose a chart type
var ChartType = useHighStock ? Highcharts.StockChart : Highcharts.Chart;
//Default highchart colors
var colors = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'];
series.map(function (serie, index) {
if (!serie.color) {
serie['color'] = colors[index % 10];
}
return serie;
});
//Get all the keys
var keys = [];
var initialKeys = [];
$.each(series, function (index, serie) {
keys.push({
display: serie.display,
value: serie.name,
text: serie.name
});
if (serie.display) {
initialKeys.push(serie.name)
}
});
selector.selectize({
plugins: ['remove_button', 'restore_on_backspace'],
delimiter: ',',
options: keys,
items: initialKeys,
onItemAdd: function (key) {
console.log('series added');
addSeries(key);
newChart(chart.options, renderedSeries);
},
onItemRemove: function (key) {
console.log('series removed');
deleteSeries(key);
newChart(chart.options, renderedSeries);
}
});
//Set initial chart options
var chartOptions;
if (typeof options.chart === "undefined") {
chartOptions = {renderTo: chartContainer.id};
} else {
chartOptions = $.extend(options["chart"], {renderTo: chartContainer.id});
}
//Initial rendered series
var renderedSeries = [];
options = $.extend(options, {chart: chartOptions}, {series: renderedSeries});
var chart = new ChartType(options);
$.each(initialKeys, function (index, key) {
addSeries(key);
});
newChart(chart.options, renderedSeries);
editor.set(chart.options);
if (save) {
saveSVG(url, save)
}
function setOptions(options) {
//Prevent export from breaking
delete options.exporting;
options['exporting'] = {scale: options.scale};
chartContainer.style.height = options.height.toString() + 'px';
if (options.width != 'auto') {
chartContainer.style.width = options.width.toString() + 'px';
}
newChart(options, renderedSeries);
}
function findSeries(series, key) {
return series.findIndex(function (obj) {
return obj.name == key;
})
}
function newChart(options, series) {
//Disable animation
var newOptions = $.extend(options, {series: series});
newOptions.plotOptions['series'] = {animation: false};
//Get zoom
var xExtremes = chart.xAxis[0].getExtremes();
//Re-plot the chart
chart.destroy();
chart = new ChartType(newOptions);
//Reset the zoom
chart.xAxis[0].setExtremes(xExtremes.min, xExtremes.max, false, false);
//Re-draw chart
chart.redraw();
}
function addSeries(key) {
var index = findSeries(series, key);
var newSeries = series[index];
renderedSeries.push(newSeries)
}
function deleteSeries(key) {
var index = findSeries(renderedSeries, key);
renderedSeries.splice(index, 1)
}
function saveSVG(url, name) {
$.ajax({
type: "POST",
url: url,
data: JSON.stringify({
svg: chart.getSVG(),
name: name
})
});
}
console.log('loaded!', Date());
}
});
},{}]},{},[1]);
</script>
```python
#缺书网,捡漏
import pymongo
client = pymongo.MongoClient('localhost', 27017)
queshu = client['queshu']
book_jianlou = queshu['book_jianlou']
def count_by_store():
match = {
'j_price':'10.4'
}
group_by = 'source'
group = {
'_id': '$%s' % (group_by if group_by else None),
'books': {'$sum': 1}
}
for store in book_jianlou.aggregate([{'$group': group}]):
yield(store)
data_g = count_by_store()
data = []
for store in data_g:
data.append({'name': store.get('_id'),
'data': [store.get('books')],
'type': 'column'})
charts.plot(data, options={'title': {'text': 'A pie chart'}}, show='inline')
```
<style>body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#555;font-family:sans-serif}
small{font-weight:400;display:block;font-size:14px}
code{background-color:#d3d3d3;border-radius:3px;font-family:monospace;padding:0 .5em}
.icon.-facebook:before,.icon.-linkedin:before,.icon.-pinterest:before,.icon.-twitter:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Post-Creator-Icons;font-style:normal;font-variant:normal;font-weight:400;line-height:1;speak:none;text-transform:none}
@font-face{font-family:Post-Creator-Icons;src:url(fonts/Post-Creator-Icons.eot);src:url(fonts/Post-Creator-Icons.eot?#iefix) format('embedded-opentype'),url(fonts/Post-Creator-Icons.woff) format('woff'),url(fonts/Post-Creator-Icons.ttf) format('truetype'),url(fonts/Post-Creator-Icons.svg#Post-Creator-Icons) format('svg');font-weight:400;font-style:normal}
.icon.-facebook:before{content:"\e001"}
.icon.-linkedin:before{content:"\e002"}
.icon.-pinterest:before{content:"\e003"}
.icon.-twitter:before{content:"\e004"}
.social-icons h4{display:inline-block;margin:20px 10px 0 0}
.social-icons .icon{display:inline-block;margin:0 5px}
body.modal-open{overflow:hidden}
.jsoneditor table,.jsoneditor td,.jsoneditor td.tree,.jsoneditor tr{border:none;margin:0}</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.default.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.0/jsoneditor.min.css"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-10">
<input type="text" id="variable-selector">
</div>
<div class="col-sm-2">
<button class="btn btn-default pull-right" type="submit" id="settings-button">Settings</button>
</div>
</div>
<div class="row">
<div class="collapse col-xs-12" id="settings-collapse">
<div class="panel panel-default" style="margin-top: 20px">
<div class="panel-heading"><h3 class="panel-title">Adjust chart settings</h3></div>
<div class="panel-body">
<div class="row">
<div id="jsoneditor" class="col-md-12" style="height: 350px"></div>
</div>
<div class="row" style="margin-top: 10px">
<div class="col-sm-4">
<button type="button" class="btn btn-primary" id="save-settings">
Apply changes
</button>
</div>
<div class="col-sm-8 text-right ">
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="options-input"
placeholder="settings" style="text-align: right">
<div class="input-group-addon"><strong>.json</strong></div>
</div>
</div>
<button type="submit" class="btn btn-primary" id="options-button">Save</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="chart-container" style="min-width: 310px;"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.18/require.min.js"></script>
<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
//findIndex polyfill
if (!Array.prototype.findIndex) {
Array.prototype.findIndex = function(predicate) {
if (this == null) {
throw new TypeError('Array.prototype.findIndex called on null or undefined');
}
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
var list = Object(this);
var length = list.length >>> 0;
var thisArg = arguments[1];
var value;
for (var i = 0; i < length; i++) {
value = list[i];
if (predicate.call(thisArg, value, i, list)) {
return i;
}
}
return -1;
};
}
if (!Array.prototype.filter) {
Array.prototype.filter = function(fun/*, thisArg*/) {
'use strict';
if (this === void 0 || this === null) {
throw new TypeError();
}
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== 'function') {
throw new TypeError();
}
var res = [];
var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
for (var i = 0; i < len; i++) {
if (i in t) {
var val = t[i];
// NOTE: Technically this should Object.defineProperty at
// the next index, as push can be affected by
// properties on Object.prototype and Array.prototype.
// But that method's new, and collisions should be
// rare, so use the more-compatible alternative.
if (fun.call(thisArg, val, i, t)) {
res.push(val);
}
}
}
return res;
};
}
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
Array.prototype.equals = function (array) {
// if the other array is a false value, return
if (!array)
return false;
// compare lengths - can save a lot of time
if (this.length != array.length)
return false;
for (var i = 0, l = this.length; i < l; i++) {
// Check if we have nested arrays
if (this[i] instanceof Array && array[i] instanceof Array) {
// recurse into the nested arrays
if (!this[i].equals(array[i]))
return false;
}
else if (this[i] != array[i]) {
// Warning - two different object instances will never be equal: {x:20} != {x:20}
return false;
}
}
return true;
};
},{}]},{},[1]);
</script>
<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
requirejs.config({
"paths": {
"highstock": "https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.5/highstock",
"export": "https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.5/modules/exporting",
"more": "https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.7/highcharts-more",
"jsoneditor": "https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.0/jsoneditor.min",
"selectize": "https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min",
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min"
},
"shim": {
"export": ["highstock"],
"more": ["highstock"]
}
});
//Define jquery here to use the pre-loaded version
define('jquery', [], function() {
return jQuery;
});
},{}]},{},[1]);
</script>
<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
//Count the number of charts on the page
if (window.counter == undefined) {
window.counter = 0;
} else {
window.counter++;
}
requirejs([
'jquery',
'selectize',
'jsoneditor',
'highstock',
'export',
'more'
], function ($, selectize, JSONEditor) {
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
var id = guid();
plot(id);
function plot(id) {
var series = [
{data: [1, 2, 4, 9], name: "temperature 1", display: true, color: '#2b908f'},
{data: [9, 4, 2, 1], name: "temperature 2", display: true},
{data: [0, 3, 5, 6], name: "temperature 3", display: false}
];
var series = [{"type": "column", "name": "[\u00a0\u4e9a\u9a6c\u900a\u00a0]", "data": [37], "display": true}, {"type": "column", "name": "[\u00a0\u4eac\u4e1c\u00a0]", "data": [43], "display": true}, {"type": "column", "name": "[\u00a0\u6587\u8f69\u00a0]", "data": [41], "display": true}, {"type": "column", "name": "[\u00a0\u5f53\u5f53\u00a0]", "data": [179], "display": true}]
var options = {};
var options = {"height": 400, "type": "line", "width": "auto", "scale": 2, "title": {"text": "A pie chart"}, "chart": {"type": "line"}}
var useHighStock = false;
var useHighStock = false
var save = 'app/chart.svg';
var save = false
var url = 'http://127.0.0.1:65079';
var url = "http://127.0.0.1:50319/"
var settingsFile = 'settings';
var settingsFile = "settings"
var scale = options.scale;
//Create different containers for the charts
var chartContainer = document.getElementById("chart-container");
chartContainer.id = "chart-container" + id;
chartContainer.style.height = options.height.toString() + 'px';
if (options.width != 'auto') {
chartContainer.style.width = options.width.toString() + 'px';
}
var selector = $("#variable-selector");
selector.attr('id', "variable-selector" + id);
var settings = $("#settings-collapse");
settings.attr('id', "settings-collapse" + id);
var button = $("#settings-button");
button.attr('id', "settings-button" + id);
var saveButton = $("#save-settings");
saveButton.attr('id', "save-settings" + id);
var optionsInput = $("#options-input");
optionsInput.attr('id', "options-input" + id);
optionsInput.val(settingsFile);
var optionsButton = $("#options-button");
optionsButton.attr('id', "options-button" + id);
// create the editor
var editorContainer = document.getElementById("jsoneditor");
editorContainer.id = "jsoneditor" + id;
var editor = new JSONEditor(editorContainer);
button.on('click', showSettings);
saveButton.on('click', applyOptions);
optionsButton.on('click', saveOptions);
function applyOptions() {
var newOptions = editor.get();
setOptions(newOptions);
settings.collapse('hide');
}
function saveOptions(event) {
event.preventDefault();
applyOptions();
var options = chart.options;
delete options.exporting;
var name = optionsInput.val() ? optionsInput.val() + '.json' : 'settings.json';
options['settingsFile'] = name;
$.ajax({
type: "POST",
url: url,
data: JSON.stringify({
options: options,
name: name
})
});
}
function showSettings() {
settings.collapse('toggle');
}
//Choose a chart type
var ChartType = useHighStock ? Highcharts.StockChart : Highcharts.Chart;
//Default highchart colors
var colors = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'];
series.map(function (serie, index) {
if (!serie.color) {
serie['color'] = colors[index % 10];
}
return serie;
});
//Get all the keys
var keys = [];
var initialKeys = [];
$.each(series, function (index, serie) {
keys.push({
display: serie.display,
value: serie.name,
text: serie.name
});
if (serie.display) {
initialKeys.push(serie.name)
}
});
selector.selectize({
plugins: ['remove_button', 'restore_on_backspace'],
delimiter: ',',
options: keys,
items: initialKeys,
onItemAdd: function (key) {
console.log('series added');
addSeries(key);
newChart(chart.options, renderedSeries);
},
onItemRemove: function (key) {
console.log('series removed');
deleteSeries(key);
newChart(chart.options, renderedSeries);
}
});
//Set initial chart options
var chartOptions;
if (typeof options.chart === "undefined") {
chartOptions = {renderTo: chartContainer.id};
} else {
chartOptions = $.extend(options["chart"], {renderTo: chartContainer.id});
}
//Initial rendered series
var renderedSeries = [];
options = $.extend(options, {chart: chartOptions}, {series: renderedSeries});
var chart = new ChartType(options);
$.each(initialKeys, function (index, key) {
addSeries(key);
});
newChart(chart.options, renderedSeries);
editor.set(chart.options);
if (save) {
saveSVG(url, save)
}
function setOptions(options) {
//Prevent export from breaking
delete options.exporting;
options['exporting'] = {scale: options.scale};
chartContainer.style.height = options.height.toString() + 'px';
if (options.width != 'auto') {
chartContainer.style.width = options.width.toString() + 'px';
}
newChart(options, renderedSeries);
}
function findSeries(series, key) {
return series.findIndex(function (obj) {
return obj.name == key;
})
}
function newChart(options, series) {
//Disable animation
var newOptions = $.extend(options, {series: series});
newOptions.plotOptions['series'] = {animation: false};
//Get zoom
var xExtremes = chart.xAxis[0].getExtremes();
//Re-plot the chart
chart.destroy();
chart = new ChartType(newOptions);
//Reset the zoom
chart.xAxis[0].setExtremes(xExtremes.min, xExtremes.max, false, false);
//Re-draw chart
chart.redraw();
}
function addSeries(key) {
var index = findSeries(series, key);
var newSeries = series[index];
renderedSeries.push(newSeries)
}
function deleteSeries(key) {
var index = findSeries(renderedSeries, key);
renderedSeries.splice(index, 1)
}
function saveSVG(url, name) {
$.ajax({
type: "POST",
url: url,
data: JSON.stringify({
svg: chart.getSVG(),
name: name
})
});
}
console.log('loaded!', Date());
}
});
},{}]},{},[1]);
</script>
```python
series = [
{'name': 'a',
'data':[{'name':'b', 'y':50},
{'name': 'c', 'y':30}]},
{'name':'d',
'data':[20]}
]
options = {
'chart': {'type':'pie'},
'title': {'text': 'A pie chart'},
'tooltip': {
'pointFormat': '{series.name}: <b>{point.percentage:.1f}%</b>'
},
'plotOptions': {
'pie': {
'allowPointSelect': True,
'cursor': 'pointer',
'showInLegend': True
}
}}
#print(series)
#type可以在这里定义,或者在数据中定义
charts.plot(series, options=options, type='pie', show='inline')
#下图就是把数据分开放的效果(两个图?)
```
[{'name': 'a', 'data': [{'y': 50, 'name': 'b'}, {'y': 30, 'name': 'c'}]}, {'name': 'd', 'data': [20]}]
<style>body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#555;font-family:sans-serif}
small{font-weight:400;display:block;font-size:14px}
code{background-color:#d3d3d3;border-radius:3px;font-family:monospace;padding:0 .5em}
.icon.-facebook:before,.icon.-linkedin:before,.icon.-pinterest:before,.icon.-twitter:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Post-Creator-Icons;font-style:normal;font-variant:normal;font-weight:400;line-height:1;speak:none;text-transform:none}
@font-face{font-family:Post-Creator-Icons;src:url(fonts/Post-Creator-Icons.eot);src:url(fonts/Post-Creator-Icons.eot?#iefix) format('embedded-opentype'),url(fonts/Post-Creator-Icons.woff) format('woff'),url(fonts/Post-Creator-Icons.ttf) format('truetype'),url(fonts/Post-Creator-Icons.svg#Post-Creator-Icons) format('svg');font-weight:400;font-style:normal}
.icon.-facebook:before{content:"\e001"}
.icon.-linkedin:before{content:"\e002"}
.icon.-pinterest:before{content:"\e003"}
.icon.-twitter:before{content:"\e004"}
.social-icons h4{display:inline-block;margin:20px 10px 0 0}
.social-icons .icon{display:inline-block;margin:0 5px}
body.modal-open{overflow:hidden}
.jsoneditor table,.jsoneditor td,.jsoneditor td.tree,.jsoneditor tr{border:none;margin:0}</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.default.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.0/jsoneditor.min.css"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-10">
<input type="text" id="variable-selector">
</div>
<div class="col-sm-2">
<button class="btn btn-default pull-right" type="submit" id="settings-button">Settings</button>
</div>
</div>
<div class="row">
<div class="collapse col-xs-12" id="settings-collapse">
<div class="panel panel-default" style="margin-top: 20px">
<div class="panel-heading"><h3 class="panel-title">Adjust chart settings</h3></div>
<div class="panel-body">
<div class="row">
<div id="jsoneditor" class="col-md-12" style="height: 350px"></div>
</div>
<div class="row" style="margin-top: 10px">
<div class="col-sm-4">
<button type="button" class="btn btn-primary" id="save-settings">
Apply changes
</button>
</div>
<div class="col-sm-8 text-right ">
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="options-input"
placeholder="settings" style="text-align: right">
<div class="input-group-addon"><strong>.json</strong></div>
</div>
</div>
<button type="submit" class="btn btn-primary" id="options-button">Save</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="chart-container" style="min-width: 310px;"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.18/require.min.js"></script>
<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
//findIndex polyfill
if (!Array.prototype.findIndex) {
Array.prototype.findIndex = function(predicate) {
if (this == null) {
throw new TypeError('Array.prototype.findIndex called on null or undefined');
}
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
var list = Object(this);
var length = list.length >>> 0;
var thisArg = arguments[1];
var value;
for (var i = 0; i < length; i++) {
value = list[i];
if (predicate.call(thisArg, value, i, list)) {
return i;
}
}
return -1;
};
}
if (!Array.prototype.filter) {
Array.prototype.filter = function(fun/*, thisArg*/) {
'use strict';
if (this === void 0 || this === null) {
throw new TypeError();
}
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== 'function') {
throw new TypeError();
}
var res = [];
var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
for (var i = 0; i < len; i++) {
if (i in t) {
var val = t[i];
// NOTE: Technically this should Object.defineProperty at
// the next index, as push can be affected by
// properties on Object.prototype and Array.prototype.
// But that method's new, and collisions should be
// rare, so use the more-compatible alternative.
if (fun.call(thisArg, val, i, t)) {
res.push(val);
}
}
}
return res;
};
}
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
Array.prototype.equals = function (array) {
// if the other array is a false value, return
if (!array)
return false;
// compare lengths - can save a lot of time
if (this.length != array.length)
return false;
for (var i = 0, l = this.length; i < l; i++) {
// Check if we have nested arrays
if (this[i] instanceof Array && array[i] instanceof Array) {
// recurse into the nested arrays
if (!this[i].equals(array[i]))
return false;
}
else if (this[i] != array[i]) {
// Warning - two different object instances will never be equal: {x:20} != {x:20}
return false;
}
}
return true;
};
},{}]},{},[1]);
</script>
<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
requirejs.config({
"paths": {
"highstock": "https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.5/highstock",
"export": "https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.5/modules/exporting",
"more": "https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.7/highcharts-more",
"jsoneditor": "https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.0/jsoneditor.min",
"selectize": "https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min",
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min"
},
"shim": {
"export": ["highstock"],
"more": ["highstock"]
}
});
//Define jquery here to use the pre-loaded version
define('jquery', [], function() {
return jQuery;
});
},{}]},{},[1]);
</script>
<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
//Count the number of charts on the page
if (window.counter == undefined) {
window.counter = 0;
} else {
window.counter++;
}
requirejs([
'jquery',
'selectize',
'jsoneditor',
'highstock',
'export',
'more'
], function ($, selectize, JSONEditor) {
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
var id = guid();
plot(id);
function plot(id) {
var series = [
{data: [1, 2, 4, 9], name: "temperature 1", display: true, color: '#2b908f'},
{data: [9, 4, 2, 1], name: "temperature 2", display: true},
{data: [0, 3, 5, 6], name: "temperature 3", display: false}
];
var series = [{"name": "a", "data": [{"y": 50, "name": "b"}, {"y": 30, "name": "c"}], "display": true}, {"name": "d", "data": [20], "display": true}]
var options = {};
var options = {"height": 400, "width": "auto", "scale": 2, "plotOptions": {"pie": {"cursor": "pointer", "allowPointSelect": true, "showInLegend": true}}, "chart": {"type": "pie"}, "tooltip": {"pointFormat": "{series.name}: <b>{point.percentage:.1f}%</b>"}, "type": "line", "title": {"text": "A pie chart"}}
var useHighStock = false;
var useHighStock = false
var save = 'app/chart.svg';
var save = false
var url = 'http://127.0.0.1:65079';
var url = "http://127.0.0.1:50319/"
var settingsFile = 'settings';
var settingsFile = "settings"
var scale = options.scale;
//Create different containers for the charts
var chartContainer = document.getElementById("chart-container");
chartContainer.id = "chart-container" + id;
chartContainer.style.height = options.height.toString() + 'px';
if (options.width != 'auto') {
chartContainer.style.width = options.width.toString() + 'px';
}
var selector = $("#variable-selector");
selector.attr('id', "variable-selector" + id);
var settings = $("#settings-collapse");
settings.attr('id', "settings-collapse" + id);
var button = $("#settings-button");
button.attr('id', "settings-button" + id);
var saveButton = $("#save-settings");
saveButton.attr('id', "save-settings" + id);
var optionsInput = $("#options-input");
optionsInput.attr('id', "options-input" + id);
optionsInput.val(settingsFile);
var optionsButton = $("#options-button");
optionsButton.attr('id', "options-button" + id);
// create the editor
var editorContainer = document.getElementById("jsoneditor");
editorContainer.id = "jsoneditor" + id;
var editor = new JSONEditor(editorContainer);
button.on('click', showSettings);
saveButton.on('click', applyOptions);
optionsButton.on('click', saveOptions);
function applyOptions() {
var newOptions = editor.get();
setOptions(newOptions);
settings.collapse('hide');
}
function saveOptions(event) {
event.preventDefault();
applyOptions();
var options = chart.options;
delete options.exporting;
var name = optionsInput.val() ? optionsInput.val() + '.json' : 'settings.json';
options['settingsFile'] = name;
$.ajax({
type: "POST",
url: url,
data: JSON.stringify({
options: options,
name: name
})
});
}
function showSettings() {
settings.collapse('toggle');
}
//Choose a chart type
var ChartType = useHighStock ? Highcharts.StockChart : Highcharts.Chart;
//Default highchart colors
var colors = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'];
series.map(function (serie, index) {
if (!serie.color) {
serie['color'] = colors[index % 10];
}
return serie;
});
//Get all the keys
var keys = [];
var initialKeys = [];
$.each(series, function (index, serie) {
keys.push({
display: serie.display,
value: serie.name,
text: serie.name
});
if (serie.display) {
initialKeys.push(serie.name)
}
});
selector.selectize({
plugins: ['remove_button', 'restore_on_backspace'],
delimiter: ',',
options: keys,
items: initialKeys,
onItemAdd: function (key) {
console.log('series added');
addSeries(key);
newChart(chart.options, renderedSeries);
},
onItemRemove: function (key) {
console.log('series removed');
deleteSeries(key);
newChart(chart.options, renderedSeries);
}
});
//Set initial chart options
var chartOptions;
if (typeof options.chart === "undefined") {
chartOptions = {renderTo: chartContainer.id};
} else {
chartOptions = $.extend(options["chart"], {renderTo: chartContainer.id});
}
//Initial rendered series
var renderedSeries = [];
options = $.extend(options, {chart: chartOptions}, {series: renderedSeries});
var chart = new ChartType(options);
$.each(initialKeys, function (index, key) {
addSeries(key);
});
newChart(chart.options, renderedSeries);
editor.set(chart.options);
if (save) {
saveSVG(url, save)
}
function setOptions(options) {
//Prevent export from breaking
delete options.exporting;
options['exporting'] = {scale: options.scale};
chartContainer.style.height = options.height.toString() + 'px';
if (options.width != 'auto') {
chartContainer.style.width = options.width.toString() + 'px';
}
newChart(options, renderedSeries);
}
function findSeries(series, key) {
return series.findIndex(function (obj) {
return obj.name == key;
})
}
function newChart(options, series) {
//Disable animation
var newOptions = $.extend(options, {series: series});
newOptions.plotOptions['series'] = {animation: false};
//Get zoom
var xExtremes = chart.xAxis[0].getExtremes();
//Re-plot the chart
chart.destroy();
chart = new ChartType(newOptions);
//Reset the zoom
chart.xAxis[0].setExtremes(xExtremes.min, xExtremes.max, false, false);
//Re-draw chart
chart.redraw();
}
function addSeries(key) {
var index = findSeries(series, key);
var newSeries = series[index];
renderedSeries.push(newSeries)
}
function deleteSeries(key) {
var index = findSeries(renderedSeries, key);
renderedSeries.splice(index, 1)
}
function saveSVG(url, name) {
$.ajax({
type: "POST",
url: url,
data: JSON.stringify({
svg: chart.getSVG(),
name: name
})
});
}
console.log('loaded!', Date());
}
});
},{}]},{},[1]);
</script>
```python
data_g = count_by_store()
#把数据放在列表中,data=[{'name':'','y':10},{....}],每个数据以字典形式存在
data=[]
for store in data_g:
data.append({'name': store.get('_id'),
'y': store.get('books')})
#做饼状图时,注意所有数据是一个整体,直接赋值给‘data',单个数据放置时,如条形图或者柱状图 'data' = [112]
series = [{
'name': 'Janlou Books',
'data': data,
'type': 'pie'
}]
#做一些设置,如图的标题等
options = {
'chart': {'type':'pie'},
'title': {'text': 'A pie chart'},
#鼠标移到图上时的提示内容
'tooltip': {
'pointFormat': 'Per: <b>{point.percentage:.1f}%</b>'
},
'plotOptions': {
'pie': {
'allowPointSelect': True,
'cursor': 'pointer',
'showInLegend': True
}
}}
#print(series)
charts.plot(series, options=options, type='pie', show='inline')
```
[{'type': 'pie', 'name': 'Janlou Books', 'data': [{'y': 37, 'name': '[\xa0亚马逊\xa0]'}, {'y': 43, 'name': '[\xa0京东\xa0]'}, {'y': 41, 'name': '[\xa0文轩\xa0]'}, {'y': 179, 'name': '[\xa0当当\xa0]'}]}]
<style>body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#555;font-family:sans-serif}
small{font-weight:400;display:block;font-size:14px}
code{background-color:#d3d3d3;border-radius:3px;font-family:monospace;padding:0 .5em}
.icon.-facebook:before,.icon.-linkedin:before,.icon.-pinterest:before,.icon.-twitter:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Post-Creator-Icons;font-style:normal;font-variant:normal;font-weight:400;line-height:1;speak:none;text-transform:none}
@font-face{font-family:Post-Creator-Icons;src:url(fonts/Post-Creator-Icons.eot);src:url(fonts/Post-Creator-Icons.eot?#iefix) format('embedded-opentype'),url(fonts/Post-Creator-Icons.woff) format('woff'),url(fonts/Post-Creator-Icons.ttf) format('truetype'),url(fonts/Post-Creator-Icons.svg#Post-Creator-Icons) format('svg');font-weight:400;font-style:normal}
.icon.-facebook:before{content:"\e001"}
.icon.-linkedin:before{content:"\e002"}
.icon.-pinterest:before{content:"\e003"}
.icon.-twitter:before{content:"\e004"}
.social-icons h4{display:inline-block;margin:20px 10px 0 0}
.social-icons .icon{display:inline-block;margin:0 5px}
body.modal-open{overflow:hidden}
.jsoneditor table,.jsoneditor td,.jsoneditor td.tree,.jsoneditor tr{border:none;margin:0}</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.default.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.0/jsoneditor.min.css"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-10">
<input type="text" id="variable-selector">
</div>
<div class="col-sm-2">
<button class="btn btn-default pull-right" type="submit" id="settings-button">Settings</button>
</div>
</div>
<div class="row">
<div class="collapse col-xs-12" id="settings-collapse">
<div class="panel panel-default" style="margin-top: 20px">
<div class="panel-heading"><h3 class="panel-title">Adjust chart settings</h3></div>
<div class="panel-body">
<div class="row">
<div id="jsoneditor" class="col-md-12" style="height: 350px"></div>
</div>
<div class="row" style="margin-top: 10px">
<div class="col-sm-4">
<button type="button" class="btn btn-primary" id="save-settings">
Apply changes
</button>
</div>
<div class="col-sm-8 text-right ">
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="options-input"
placeholder="settings" style="text-align: right">
<div class="input-group-addon"><strong>.json</strong></div>
</div>
</div>
<button type="submit" class="btn btn-primary" id="options-button">Save</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="chart-container" style="min-width: 310px;"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.18/require.min.js"></script>
<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
//findIndex polyfill
if (!Array.prototype.findIndex) {
Array.prototype.findIndex = function(predicate) {
if (this == null) {
throw new TypeError('Array.prototype.findIndex called on null or undefined');
}
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
var list = Object(this);
var length = list.length >>> 0;
var thisArg = arguments[1];
var value;
for (var i = 0; i < length; i++) {
value = list[i];
if (predicate.call(thisArg, value, i, list)) {
return i;
}
}
return -1;
};
}
if (!Array.prototype.filter) {
Array.prototype.filter = function(fun/*, thisArg*/) {
'use strict';
if (this === void 0 || this === null) {
throw new TypeError();
}
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== 'function') {
throw new TypeError();
}
var res = [];
var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
for (var i = 0; i < len; i++) {
if (i in t) {
var val = t[i];
// NOTE: Technically this should Object.defineProperty at
// the next index, as push can be affected by
// properties on Object.prototype and Array.prototype.
// But that method's new, and collisions should be
// rare, so use the more-compatible alternative.
if (fun.call(thisArg, val, i, t)) {
res.push(val);
}
}
}
return res;
};
}
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
Array.prototype.equals = function (array) {
// if the other array is a false value, return
if (!array)
return false;
// compare lengths - can save a lot of time
if (this.length != array.length)
return false;
for (var i = 0, l = this.length; i < l; i++) {
// Check if we have nested arrays
if (this[i] instanceof Array && array[i] instanceof Array) {
// recurse into the nested arrays
if (!this[i].equals(array[i]))
return false;
}
else if (this[i] != array[i]) {
// Warning - two different object instances will never be equal: {x:20} != {x:20}
return false;
}
}
return true;
};
},{}]},{},[1]);
</script>
<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
requirejs.config({
"paths": {
"highstock": "https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.5/highstock",
"export": "https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.5/modules/exporting",
"more": "https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.7/highcharts-more",
"jsoneditor": "https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.0/jsoneditor.min",
"selectize": "https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min",
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min"
},
"shim": {
"export": ["highstock"],
"more": ["highstock"]
}
});
//Define jquery here to use the pre-loaded version
define('jquery', [], function() {
return jQuery;
});
},{}]},{},[1]);
</script>
<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
//Count the number of charts on the page
if (window.counter == undefined) {
window.counter = 0;
} else {
window.counter++;
}
requirejs([
'jquery',
'selectize',
'jsoneditor',
'highstock',
'export',
'more'
], function ($, selectize, JSONEditor) {
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
var id = guid();
plot(id);
function plot(id) {
var series = [
{data: [1, 2, 4, 9], name: "temperature 1", display: true, color: '#2b908f'},
{data: [9, 4, 2, 1], name: "temperature 2", display: true},
{data: [0, 3, 5, 6], name: "temperature 3", display: false}
];
var series = [{"type": "pie", "name": "Janlou Books", "data": [{"y": 37, "name": "[\u00a0\u4e9a\u9a6c\u900a\u00a0]"}, {"y": 43, "name": "[\u00a0\u4eac\u4e1c\u00a0]"}, {"y": 41, "name": "[\u00a0\u6587\u8f69\u00a0]"}, {"y": 179, "name": "[\u00a0\u5f53\u5f53\u00a0]"}], "display": true}]
var options = {};
var options = {"height": 400, "width": "auto", "scale": 2, "plotOptions": {"pie": {"cursor": "pointer", "allowPointSelect": true, "showInLegend": true}}, "chart": {"type": "pie"}, "tooltip": {"pointFormat": "Per: <b>{point.percentage:.1f}%</b>"}, "type": "line", "title": {"text": "A pie chart"}}
var useHighStock = false;
var useHighStock = false
var save = 'app/chart.svg';
var save = false
var url = 'http://127.0.0.1:65079';
var url = "http://127.0.0.1:50319/"
var settingsFile = 'settings';
var settingsFile = "settings"
var scale = options.scale;
//Create different containers for the charts
var chartContainer = document.getElementById("chart-container");
chartContainer.id = "chart-container" + id;
chartContainer.style.height = options.height.toString() + 'px';
if (options.width != 'auto') {
chartContainer.style.width = options.width.toString() + 'px';
}
var selector = $("#variable-selector");
selector.attr('id', "variable-selector" + id);
var settings = $("#settings-collapse");
settings.attr('id', "settings-collapse" + id);
var button = $("#settings-button");
button.attr('id', "settings-button" + id);
var saveButton = $("#save-settings");
saveButton.attr('id', "save-settings" + id);
var optionsInput = $("#options-input");
optionsInput.attr('id', "options-input" + id);
optionsInput.val(settingsFile);
var optionsButton = $("#options-button");
optionsButton.attr('id', "options-button" + id);
// create the editor
var editorContainer = document.getElementById("jsoneditor");
editorContainer.id = "jsoneditor" + id;
var editor = new JSONEditor(editorContainer);
button.on('click', showSettings);
saveButton.on('click', applyOptions);
optionsButton.on('click', saveOptions);
function applyOptions() {
var newOptions = editor.get();
setOptions(newOptions);
settings.collapse('hide');
}
function saveOptions(event) {
event.preventDefault();
applyOptions();
var options = chart.options;
delete options.exporting;
var name = optionsInput.val() ? optionsInput.val() + '.json' : 'settings.json';
options['settingsFile'] = name;
$.ajax({
type: "POST",
url: url,
data: JSON.stringify({
options: options,
name: name
})
});
}
function showSettings() {
settings.collapse('toggle');
}
//Choose a chart type
var ChartType = useHighStock ? Highcharts.StockChart : Highcharts.Chart;
//Default highchart colors
var colors = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'];
series.map(function (serie, index) {
if (!serie.color) {
serie['color'] = colors[index % 10];
}
return serie;
});
//Get all the keys
var keys = [];
var initialKeys = [];
$.each(series, function (index, serie) {
keys.push({
display: serie.display,
value: serie.name,
text: serie.name
});
if (serie.display) {
initialKeys.push(serie.name)
}
});
selector.selectize({
plugins: ['remove_button', 'restore_on_backspace'],
delimiter: ',',
options: keys,
items: initialKeys,
onItemAdd: function (key) {
console.log('series added');
addSeries(key);
newChart(chart.options, renderedSeries);
},
onItemRemove: function (key) {
console.log('series removed');
deleteSeries(key);
newChart(chart.options, renderedSeries);
}
});
//Set initial chart options
var chartOptions;
if (typeof options.chart === "undefined") {
chartOptions = {renderTo: chartContainer.id};
} else {
chartOptions = $.extend(options["chart"], {renderTo: chartContainer.id});
}
//Initial rendered series
var renderedSeries = [];
options = $.extend(options, {chart: chartOptions}, {series: renderedSeries});
var chart = new ChartType(options);
$.each(initialKeys, function (index, key) {
addSeries(key);
});
newChart(chart.options, renderedSeries);
editor.set(chart.options);
if (save) {
saveSVG(url, save)
}
function setOptions(options) {
//Prevent export from breaking
delete options.exporting;
options['exporting'] = {scale: options.scale};
chartContainer.style.height = options.height.toString() + 'px';
if (options.width != 'auto') {
chartContainer.style.width = options.width.toString() + 'px';
}
newChart(options, renderedSeries);
}
function findSeries(series, key) {
return series.findIndex(function (obj) {
return obj.name == key;
})
}
function newChart(options, series) {
//Disable animation
var newOptions = $.extend(options, {series: series});
newOptions.plotOptions['series'] = {animation: false};
//Get zoom
var xExtremes = chart.xAxis[0].getExtremes();
//Re-plot the chart
chart.destroy();
chart = new ChartType(newOptions);
//Reset the zoom
chart.xAxis[0].setExtremes(xExtremes.min, xExtremes.max, false, false);
//Re-draw chart
chart.redraw();
}
function addSeries(key) {
var index = findSeries(series, key);
var newSeries = series[index];
renderedSeries.push(newSeries)
}
function deleteSeries(key) {
var index = findSeries(renderedSeries, key);
renderedSeries.splice(index, 1)
}
function saveSVG(url, name) {
$.ajax({
type: "POST",
url: url,
data: JSON.stringify({
svg: chart.getSVG(),
name: name
})
});
}
console.log('loaded!', Date());
}
});
},{}]},{},[1]);
</script>
阅读全文
0 0
- datacharts
- 动态规划入门之硬币代码
- Appium基础篇3-第一个appium自动化脚本之自动安装apk包到手机
- sql server 获取最后一条插入的记录的主键
- ANSI,ASCII,Unicode的区别与联系
- 1027. Colors in Mars (20)
- datacharts
- buildAsset分析(三)——BuildAssetBundle
- 2018年搜狐秋季校招校招大数据研发笔试编程题—Kolakoski序列
- 抓包神器Charles使用教程(二) 主要抓包调试功能操作
- 《OC基础教程》读书笔记5-创建简单的用户界面
- 美团二面,后台开发
- Android中HandlerThread面试相关知识点
- 解析Java为什么不接受合法的HTTPS证书
- 干货 | TensorFlow的55个经典案例