将字典列表传递到.js文件以使用python flask创建高图

时间:2018-08-06 04:23:37

标签: javascript python flask highcharts

我正在尝试将字典列表传递给.js文件,以使用python flask创建高图。有人可以帮我弄清楚如何调用将键值对传递到堆积条形图中的x和y轴吗?

app.py

typeuser_dict=[{u'dave': [163, 330, 17, datetime.datetime(2018, 7, 20, 0, 0)]}]

return render_template('profile.html', typeuser_dict=typeuser_dict)

barchart.js

Highcharts.chart('container', {
chart: {
  type: 'column'
},
title: {
  text: 'Stacked column chart'
},
xAxis: {
  categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
  min: 0,
  title: {
    text: 'Total fruit consumption'
  },
  stackLabels: {
    enabled: true,
    style: {
      fontWeight: 'bold',
      color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
    }
  }
},
legend: {
  align: 'right',
  x: -30,
  verticalAlign: 'top',
  y: 25,
  floating: true,
  backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
  borderColor: '#CCC',
  borderWidth: 1,
  shadow: false
},
tooltip: {
  headerFormat: '<b>{point.x}</b><br/>',
  pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
  column: {
    stacking: 'normal',
    dataLabels: {
      enabled: true,
      color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
    }
  }
},
series: [{
  name: 'A',
  data: [5, 3, 4, 7, 2]
}, {
  name: 'J',
  data: [2, 2, 3, 2, 1]
}, {
  name: 'Z',
  data: [3, 4, 4, 2, 5]
}]});

barchart.js中的基本系列应该从typeuser_dict获取我的列表值。

1 个答案:

答案 0 :(得分:0)

您可以使用
向HTML模板发出原始字符串。 var x ={{my_x_from_flask|safe}}
并根据需要使用var x
从python端,您必须提取x的值并将其传递

您可以直接传递JSON字符串,并在JS端将其用作正确的JSON。