Python 将烧瓶中的系列传递到chart.JS
在python flask中将数据框列变量传递给图表JS的最佳方式是什么？我当前的代码可以工作，但只有当我使用一个非常旧版本的ChartJS时。如果我更新版本，我似乎无法使用相同的方式传递变量（行值、行标签） 这是我的密码Python 将烧瓶中的系列传递到chart.JS,python,flask,chart.js,Python,Flask,Chart.js,在python flask中将数据框列变量传递给图表JS的最佳方式是什么？我当前的代码可以工作，但只有当我使用一个非常旧版本的ChartJS时。如果我更新版本，我似乎无法使用相同的方式传递变量（行值、行标签） 这是我的密码 ... line_labels=dfchart['index'] line_values=dfchart['cumulative_profit'] min = dfchart['cumulative_profit'].min() max = dfchart['cumulat
...
line_labels=dfchart['index']
line_values=dfchart['cumulative_profit']
min = dfchart['cumulative_profit'].min()
max = dfchart['cumulative_profit'].max()
max = max+((2/100)*max)
max= round(max/10)*10
min= round(min/10)*10
max= max + abs(min)
return render_template('line_chart.html', min=min, max=max, labels=line_labels,
values=line_values)
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
</head>
<body>
<center>
<canvas id="chart" width="600" height="260"></canvas>
<script>
// bar chart data
var lineData = {
labels : [
{% for item in labels %}
"{{ item }}",
{% endfor %}
],
datasets : [{
fillColor: "#e67e00",
pointRadius: 0,
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#e67e0",
pointHighlightFill: "#e67e0",
pointHighlightStroke: "#e67e0",
bezierCurve : true,
pointRadius: 4,
data : [
{% for item in values %}
{{ item }},
{% endfor %}]
}
]
}
Chart.defaults.global.animationSteps = 50;
Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(0,0,0,0.8)";
Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = false;
Chart.defaults.global.scaleLineColor = "#e67e0";
Chart.defaults.global.scaleFontSize = 12;
// get bar chart canvas
var mychart = document.getElementById("chart").getContext("2d");
steps = 10
max = {{ max }}
min = {{min}}
// draw bar chart
var LineChartDemo = new Chart(mychart).Line(lineData, {
scaleOverride: true,
scaleSteps: steps,
scaleStepWidth: Math.ceil(max / steps),
scaleStartValue: min,
scaleShowVerticalLines: false,
scaleShowGridLines : true,
barShowStroke : true,
scaleShowLabels: true,
bezierCurve: true,
});
</script>
</center>
</body>
</html>
//条形图数据
变量lineData={
标签：[
{标签%%中的项的百分比}
“{{item}}”，
{%endfor%}
],
数据集：[{
填充颜色：“e67e00”，
点半径：0，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:#e67e0“，
pointHighlightFill:“e67e0”，
pointHighlightStroke:#e67e0“，
贝塞尔曲线：对，
点半径：4，
数据：[
{值%%中的项的百分比}
{{item}}，
{%endfor%}]
}
]
}
Chart.defaults.global.animationSteps=50；
Chart.defaults.global.tooltipYPadding=16；
Chart.defaults.global.tooltipCornerRadius=0；
Chart.defaults.global.tooltipTitleFontStyle=“正常”；
Chart.defaults.global.tooltipFillColor=“rgba（0,0,0,0.8）”；
Chart.defaults.global.animationEasing=“easeOutBounce”；
Chart.defaults.global.responsive=false；
Chart.defaults.global.scaleLineColor=“#e67e0”；
Chart.defaults.global.scaleFontSize=12；
//获取条形图画布
var mychart=document.getElementById（“图表”）.getContext（“2d”）；
步骤=10
max={{max}}
min={{min}
//绘制条形图
var LineChartDemo=新图表（mychart）.Line（lineData{
scaleOverride：对，
缩放步骤：步骤，
缩放宽度：Math.ceil（最大/步数），
scaleStartValue:min，
ScaleShowVerticalline:错误，
scaleShowGridLines：对，
barShowStroke：是的，
scaleShowLabels：对，
贝塞尔曲线：对，
});
line\u标签line\u值pd.系列