pivot.html

//pivot.css
.green {
    color: green;
}
  
.red {
    color: red;
}


//pivot.html
<head>
    <!-- pivot.js script 标签 -->
    <script src="pivot.js"></script>
    
    <!-- 引入您的CSS文件 -->
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pivot Table Example</title>
  <script src="https://cdn.jsdelivr.net/npm/pivot.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    #output {
      margin: 20px;
    }
  </style>
</head>
<body>
  <div id="output"></div>

  <script>
    // Sample data
    var inputData = [
      { Date: "2024-02-01", Product: "A", Sales: 100 },
      { Date: "2024-02-01", Product: "B", Sales: 150 },
      { Date: "2024-02-02", Product: "A", Sales: 200 },
      { Date: "2024-02-02", Product: "B", Sales: 250 },
    ];

    // Create pivot table
    var result = pivot(inputData, {
      rows: ["Date"],
      cols: ["Product"],
      aggregator: pivot.aggregator.sum(["Sales"]),
    });

    // Display pivot table
    var renderers = $.extend($.pivotUtilities.renderers, $.pivotUtilities.c3_renderers);
    $("#output").pivotUI(inputData, {
      renderers: renderers
    });
  </script>
</body>
</html>


<form action="" method="get">
    <select name="deal" onchange="this.form.submit()">
        <option value="All" {% if selected_deal == 'All' %}selected{% endif %}>All Deals</option>
        {% for deal in deals %}
        <option value="{{ deal }}" {% if selected_deal == deal %}selected{% endif %}>{{ deal }}</option>
        {% endfor %}
    </select>
    <select name="lp" onchange="this.form.submit()">
        <option value="All" {% if selected_lp == 'All' %}selected{% endif %}>All LPs</option>
        {% for lp in lps %}
        <option value="{{ lp }}" {% if selected_lp == lp %}selected{% endif %}>{{ lp }}</option>
        {% endfor %}
    </select>
</form>


from django.shortcuts import render
from .models import TableModel

def chart_view(request):
    # 获取URL参数
    selected_deal = request.GET.get('deal', 'All')
    selected_lp = request.GET.get('lp', 'All')

    # 获取Deal和LP的所有唯一值用于下拉菜单
    deals = TableModel.objects.values_list('Deal', flat=True).distinct()
    lps = TableModel.objects.values_list('LP', flat=True).distinct()

    # 初始化查询集
    queryset = TableModel.objects.all()

    # 应用筛选条件，除非选择了“All”
    if selected_deal != 'All':
        queryset = queryset.filter(Deal=selected_deal)
    if selected_lp != 'All':
        queryset = queryset.filter(LP=selected_lp)

    # 准备数据
    data = list(queryset.values('Date', 'Data1', 'Data2', 'Data3', 'Data4').order_by('Date'))

    context = {
        'deals': deals,
        'lps': lps,
        'selected_deal': selected_deal,
        'selected_lp': selected_lp,
        'data': data,
    }
    return render(request, 'your_template.html', context)
    
    
<script>
var lineChart = echarts.init(document.getElementById('lineChart'));
var pieChart = echarts.init(document.getElementById('pieChart'));

// 示例数据
var rawData = {{ data|safe }};
var dates = rawData.map(function(item) { return item.Date; });
var data1 = rawData.map(function(item) { return item.Data1; });
var data2 = rawData.map(function(item) { return item.Data2; });

// 配置折线图
var lineOption = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        },
        formatter: function(params) {
            var dataIndex = params[0].dataIndex;
            // 假设这里简单地更新饼图数据为Data1和Data2的值
            updatePieChart(data1[dataIndex], data2[dataIndex]);
            return params[0].seriesName + ': ' + params[0].value;
        }
    },
    xAxis: {
        type: 'category',
        data: dates
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: data1,
        type: 'line',
        smooth: true
    }]
};

// 初始化折线图
lineChart.setOption(lineOption);

// 配置饼图
var pieOption = {
    series: [{
        type: 'pie',
        data: [
            {value: 0, name: 'Data1'},
            {value: 0, name: 'Data2'}
        ]
    }]
};

// 初始化饼图
pieChart.setOption(pieOption);

// 更新饼图数据的函数
function updatePieChart(data1Value, data2Value) {
    pieChart.setOption({
        series: [{
            data: [
                {value: data1Value, name: 'Data1'},
                {value: data2Value, name: 'Data2'}
            ]
        }]
    });
}
</script>

//Echarts example
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
var rawData = {{ data|safe }};
var dates = rawData.map(item => item.Date);
var data1 = rawData.map(item => item.Data1);
var data2 = rawData.map(item => item.Data2);

// 初始化折线图
var lineChart = echarts.init(document.getElementById('lineChart'));
var lineOption = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {type: 'category', data: dates},
    yAxis: {type: 'value'},
    series: [
        {type: 'line', name: 'Data1', encode: {x: 'Date', y: 'Data1'}},
        {type: 'line', name: 'Data2', encode: {x: 'Date', y: 'Data2'}}
    ],
    dataset: {
        source: rawData
    }
};
lineChart.setOption(lineOption);

// 初始化饼图
var pieChart = echarts.init(document.getElementById('pieChart'));
var pieOption = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
        {
            name: 'Data Overview',
            type: 'pie',
            radius: '50%',
            data: [
                {value: data1.reduce((a, b) => a + b, 0), name: 'Data1'},
                {value: data2.reduce((a, b) => a + b, 0), name: 'Data2'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
pieChart.setOption(pieOption);

// 数据联动
echarts.connect([lineChart, pieChart]);

</script>


var rawData = {{ data|safe }};

// 将数据按Data1的值分组
var groupedData = {};
rawData.forEach(function(item) {
    if (!groupedData[item.Data1]) {
        groupedData[item.Data1] = [];
    }
    groupedData[item.Data1].push({date: item.Date, value: item.Data2});
});

// 提取并去重所有日期，确保已排序
var dates = rawData.map(function(item) { return item.Date; });
dates = [...new Set(dates)].sort(function(a, b) {
    return new Date(a) - new Date(b);
});

// 补充缺失的日期数据为null
Object.keys(groupedData).forEach(function(key) {
    var fullData = [];
    dates.forEach(function(date) {
        var foundItem = groupedData[key].find(item => item.date === date);
        if (foundItem) {
            fullData.push(foundItem.value);
        } else {
            // 对于缺失的日期插入null
            fullData.push(null);
        }
    });
    // 更新groupedData为包含所有日期的完整数据
    groupedData[key] = fullData;
});

// 创建Echarts系列数组
var series = Object.keys(groupedData).map(function(key) {
    return {
        name: key,
        type: 'line',
        // 直接使用完整数据，已经包含null值
        data: groupedData[key]
    };
});

// 使用处理好的dates和series配置Echarts
var option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: dates,
    },
    yAxis: {
        type: 'value'
    },
    series: series,
};


<script>
// 假设 rawData 通过某种方式已经提供
var rawData = {{ data|safe }};

// 提取 Data1 的所有唯一值作为系列名称
var categories = [...new Set(rawData.map(item => item.Data1))];

// 初始化折线图
var lineChart = echarts.init(document.getElementById('lineChart'));
var pieChart = echarts.init(document.getElementById('pieChart'));

// 配置折线图
var lineOption = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    legend: {
        data: categories
    },
    xAxis: {
        type: 'category',
        data: [...new Set(rawData.map(item => item.Date))].sort(),
        axisPointer: {
            type: 'shadow'
        }
    },
    yAxis: {
        type: 'value'
    },
    series: categories.map(category => ({
        name: category,
        type: 'line',
        data: rawData.filter(item => item.Data1 === category).map(item => item.Data2),
        smooth: true
    }))
};

// 配置饼图（初始为空）
var pieOption = {
    title: {
        text: 'Data2 Distribution',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
        {
            name: 'Data2',
            type: 'pie',
            radius: '55%',
            data: [],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 设置折线图的配置项
lineChart.setOption(lineOption);

// 设置饼图的配置项
pieChart.setOption(pieOption);

// 折线图添加鼠标悬停事件监听，更新饼图数据
lineChart.on('mouseover', function (params) {
    // 基于当前悬停的点的日期，更新饼图数据
    var currentDate = params.name;
    var currentData = rawData.filter(item => item.Date === currentDate);
    var pieData = currentData.map(item => {
        return { value: item.Data2, name: item.Data1 };
    });
    pieChart.setOption({
        series: [{
            // 更新饼图的数据
            data: pieData
        }]
    });
});
</script>


<script>
var rawData = {{ data|safe }};
var categories = [...new Set(rawData.map(item => item.Data1))];

// 初始化折线图和饼图
var lineChart = echarts.init(document.getElementById('lineChart'));
var pieChart = echarts.init(document.getElementById('pieChart'));

// 准备X轴数据（日期）
var xAxisData = [...new Set(rawData.map(item => item.Date))].sort();

// 准备折线图系列数据
var seriesData = categories.map(category => ({
    name: category,
    type: 'line',
    data: xAxisData.map(date => {
        var item = rawData.find(it => it.Date === date && it.Data1 === category);
        return item ? item.Data2 : null;
    }),
    smooth: true
}));

// 设置折线图的配置项
lineChart.setOption({
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: xAxisData
    },
    yAxis: {
        type: 'value'
    },
    series: seriesData
});

// 更新饼图数据的函数
function updatePieChartData(date) {
    var pieData = categories.map(category => {
        var item = rawData.find(it => it.Date === date && it.Data1 === category);
        return {
            name: category,
            value: item ? item.Data2 : 0
        };
    }).filter(it => it.value > 0); // 过滤掉值为0的分类

    pieChart.setOption({
        series: [{
            name: 'Data2 Distribution',
            type: 'pie',
            data: pieData
        }]
    });
}

// 初始化饼图数据为第一列的值
updatePieChartData(xAxisData[0]);

// 监听折线图的mouseover事件来更新饼图
lineChart.on('mouseover', function(params) {
    if (params.componentType === 'series') {
        updatePieChartData(params.name);
    }
});
</script>


function transformRawDataToDatasetSource(rawData) {
    // 检查 rawData 是否为空
    if (!rawData || !rawData.length) {
        return [];
    }

    // 获取字段名称（假设所有对象的键集合是相同的）
    const fields = Object.keys(rawData[0]);

    // 构建 dataset 的 source 数组
    const source = [fields]; // 首行是字段名称

    // 添加每行的数据
    rawData.forEach(item => {
        source.push(fields.map(field => item[field]));
    });

    return source;
}

// 假设 rawData 是从后端获取的数据
var rawData = [
    {"Date": "2021-01-01", "Data1": 10, "Data2": 20},
    {"Date": "2021-01-02", "Data1": 15, "Data2": 25},
    {"Date": "2021-01-03", "Data1": 8, "Data2": 18}
];

// 转换 rawData 到 dataset 的 source 格式
var datasetSource = transformRawDataToDatasetSource(rawData);


var rawData = [
    {"Date": "2021-01-01", "Data1": 10, "Data2": 20},
    {"Date": "2021-01-02", "Data1": 15, "Data2": 25},
    {"Date": "2021-01-03", "Data1": 8, "Data2": 18}
];

// 初始化结果数组
var dates = [];
var data1Values = [];
var data2Values = [];

// 遍历原始数据并填充结果数组
rawData.forEach(item => {
    dates.push(item.Date);          // 收集所有日期
    data1Values.push(item.Data1);   // 收集所有Data1的值
    data2Values.push(item.Data2);   // 收集所有Data2的值
});

// 组合成目标格式
var transformedData = [
    dates,
    data1Values,
    data2Values
];

// 输出转换后的数据查看结果
console.log(transformedData);